(2)、React中使用ECharts——折线图

Posted 2023-04-23

参考技术A

（1） title: 标题组件，包含主标题和副标题。
    --- text (string)：主标题文本，支持使用 \\n 换行。
    --- x (string)：在x轴位置。
    --- textStyle (object)：主标题文字的颜色。

（2） tooltip: 提示框组件。
    --- trigger (string)：触发类型。(默认: \'item\' ）
      |--- item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      |--- axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      |--- none：什么都不触发。

（3） xAxis: 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

（4） yAxis: 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

（5） series : 系列列表。每个系列通过 type 决定自己的图表类型。

更多折线图实例信息请参考ECharts： https://www.echartsjs.com/examples/#chart-type-line

ECharts折线图数据展示错乱

参考技术A 使用echarts对数据进行折线图展示时，第一次数据是正确的，当切换数据，重新 setOption 时，数据错乱。如图：

查询echarts官方文件，有 clear 方法：清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个空对象。

验证：

再次点击折线图显示正常。

echarts API echartsInstance.clear