react中使用ECharts注意的问题

React / 2023-03-17

ECharts

ECharts的官网描述:

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

对比了多款数据可视化产品后,对ECharts钟爱有加,不仅是其丰富的配置项,恰当的表现形式,更优秀的是相对庞大的社区群体。
但在由于采用的前端框架为React/UMI/Ant Design,所以在使用过程中遇到了不少问题,经历了一段的填坑期,现在已经可以正常使用了。

依赖包

"echarts": "^4.2.1",
"echarts-for-react": "^2.0.15-beta.0",
"echarts-gl": "^1.1.1",
"echarts-liquidfill": "^2.0.5",

其中echarts 和 echarts-for-react 是必须要有的,另外两个是在使用特定组件的时候需要用到的,echarts-gl 是使用GL组件必须的包,echarts-liquidfill是在做水波图时必须的包。

使用方式

echarts-for-react针对ECharts提供了专用组件ReactEcharts,只需配置option参数,即可实现ECharts组件的正常显示,简单写个例子(我用的都是函数式组件):

import React from 'react';
import ReactEcharts from 'echarts-for-react';

export const EchartExample = (props) => {
const option = {
...
}
return (
<div>
<ReactEcharts option={option}/>
</div>
);
};

其中option就是ECharts的配置项了,具体内容可以参照:
ECharts配置项手册
也可看一些教程:
w3cschool的ECharts教程

举个简单的例子:

  const option = {
    backgroundColor: '#001529',
    color: '#0093EE',
    title: {
      top: '2%',
      left: '5%',
      text: title,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
      backgroundColor: ['rgba(255,255,255,0.85)'],
      textStyle: {
        fontSize: 10,
        color: '#353535',
      },
      formatter: function(params) {
        const date = params[0].name;
        const value = params[0].value;
        return `<div align="left">${date}</div><div align="left">${params[0].seriesName}: ${typeof (value) == 'number' ? value.toFixed(2) : "无数据"}</div>`;
      },
    },
    grid: {
      left: '7%',
      right: '5%',
      top: '12%',
      bottom: '12%',
    },
    xAxis: [{
      type: 'category',
      data: timeMode?xdata.map((data)=>{return data.split("T")[0].slice(5, 10)}):xdata,
      axisPointer: {
        type: 'shadow',
      },
      axisLine: {
        lineStyle: {
          color: Chart.Config.x_line_color,
        },
      },
      axisLabel: {
        // margin: 26,
        interval: (typeof(xdata)==="undefined"||xdata==null)?2:parseInt((xdata.length/20).toString()),
        rotate: 40,
        textStyle: {
          color: Chart.Config.x_font_color,
          fontSize: 10,
        },
      },
    }],
    yAxis: [{
      axisPointer: {
        show: false,
      },
      splitNumber: 6,
      type: 'value',
      min: 0, //max: 6000,
      axisLabel: {
        textStyle: {
          color: Chart.Config.y_font_color,
          fontSize: '12px',
        },
      },
      axisLine: {
        lineStyle: {
          color: Chart.Config.y_line_color,
        },
      },
      splitLine: {
        lineStyle: {
          color: Chart.Config.split_line_color,
          width: 0,
          type: 'solid',
        },
      },
    },
      {
        axisPointer: {
          show: false,
        },
        splitNumber: 6,
        type: 'value',
        min: 0, //max: 0.6,
        axisLabel: {
          textStyle: {
            color: Chart.Config.y_font_color,
            fontSize: '12px',
          },
        },
        axisLine: {
          lineStyle: {
            color: Chart.Config.y_line_color,
          },
        },
        splitLine: {
          lineStyle: {
            color: Chart.Config.split_line_color,
            width: 1,
            type: 'solid',
          },
        },
      },
    ],
    series: {
      name: title,
      type: 'bar',
      data: ydata,
    },
  };

如何使用echarts的api

echarts-for-react支持echarts api的调用,其中用到了useRef这个hook来实现,具体的,需要在组件中定义一个ref,然后作为参数传递给ReactEcharts。举例说明(用的TS,需要变量类型):

export const TestEcharts = () => {
  let trendRef = useRef();
  const option = {
    ...
  }
  return (
    <div>
        <ReactEcharts 
          option={option}
          ref={ref}
        />
    </div>
  )
}

这样定义之后,在需要调用api的时候,就像调用ref方法一样:

//获取ref
let eChartsRef = trendRef.current;
//获取echarts对象
let chart = eChartsRef.getEchartsInstance();

然后,在chart这个对象中,就有echarts提供的api了,报告设置样式,图标导出等等。

填坑记录

前面的内容基本在网上一搜都能直接找到答案,但实际工程应用中还是遇到了不少问题,几个比较耗时间查找的问题记录如下:

1 修改曲线组件的legend的formatter

具体说就是,比如文字太长,超过多少显示省略号什么的。

legend: {
    formatter: function (name) {
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}

这是需要引入echarts,才能正确执行配置。

  //引入echarts 才能使用format
  const echarts = require('echarts/lib/echarts');
2 GL组件的使用

前边依赖包的列举已经写上了,需要增加echarts-gl这个依赖。

3 水波图

目前发现好像就这里用到过,必须增加echarts-liquidfill这个依赖。

4 渐变色

使用方法是配置color的时候new一个
echarts.graphic.LinearGradient,具体就是这样:

    itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
              offset: 0,
              color: '#00feff',
            },
              {
                offset: 0.5,
                color: '#027eff',
              },
              {
                offset: 1,
                color: '#0286ff',
              },
            ],
          ),
        },
      },

注意的是这里必须导入echarts,否则无法执行配置:

import echarts from 'echarts'; 
import 'echarts-gl';

可能不需要导入echarts-gl,因为coding时导入了,没去掉,忘记是不是有用了……

5 图表与tab并存时,图表的导出尺寸异常

这个问题可能使用场景比较少,很少有人用到,所以网上资料不多,但我确实遇到了,而且还查了很久。
记录一下:

  • 产生原因:在隐藏tab中的图表,其默认尺寸会为初始状态,当切换显示时,会恢复到定义的尺寸。那么如果在其隐藏时,导出图表的尺寸就依然时初始状态。
  • 解决方式:最好可以在保证图表隐藏前,提前将要获取的信息通过echarts api取出来,存到对象中,这样再进行其他操作时,无需再调用echarts api。

持续更新。