react中使用echarts实现多图表遍历渲染


// tsx
 {chartData.map((item: any, index: any) => (
     <div className="bot_charts_chart_item" key={index} ref={el => (chartRefList.current[index] = el)}></div>
  ))}


// 逻辑
 const chartRefList = useRef<any>([]); 
chartData.map((item: any, index: number) => {
        const chartDom = chartRefList.current[index];
        const myChart = echarts.init(chartDom);
        const series = [
          {
            name: item.parameterName,
            type,
            smooth: true,
            symbol: 'none',
            animation: false,
            areaStyle: {},
            data: item.paramData.map((ele: any) => [ele.start, ele.val]),
            markLine: {
              data: markArr.map((ele: any) => {
                if (ele === '1') {
                  ele = { type: 'max', name: '最大值', lineStyle: {} };
                } else if (ele === '2') {
                  ele = { type: 'min', name: '最小值', lineStyle: {} };
                } else if (ele === '3') {
                  ele = { type: 'average', name: '平均值', lineStyle: {} };
                }
                return ele;
              }),
            },
          },
        ];

        const option = {
          tooltip: {
            trigger: 'axis',
            position: function (pt: any) {
              return [pt[0], '10%'];
            },
          },
          legend: {
            // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          },
          xAxis: {
            type: 'time',
            boundaryGap: false,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          series,
        };

        option && myChart.setOption(option);
        item.imgData = myChart.getDataURL({
          type: 'png',
          pixelRatio: 2,
          backgroundColor: '#fff',
        });
        return item;
      });


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容