ECharts在前端异常监控平台的实践总结

Watchtower 前端异常监控平台 使用的是 React 框架，本文就结合 React 框架来讲解如何快速在项目中使用 ECharts 和使用 Echarts 图表库的一些常见问题解决技巧。

一、如何在 React 项目中的使用

第一种方法，直接引入 echarts

安装 echarts 项目依赖

npm install echarts --save

导入 echarts

import * as echarts from 'echarts';

创建一个容器，放置 Echarts 的空div，记得在 css 文件中设置宽高

<div id="myChart"></div>

创建完容器之后即可使用数据对Echarts进行渲染

// 调取init方法
const myChart = echarts.init(document.getElementById('myChart')); 
// 图表配置项
const option = {...};  
// 配置项挂载到Echarts上
myChart.setOption(option);  

第二种方法，使用 react-echarts 组件

安装 react-echarts 依赖

npm install echarts --save-dev

导入 echarts-for-react

import ReactEcharts from 'echarts-for-react';

创建容器并对 Echarts 进行渲染

// 图表配置项
const option = {...};  
return (
    <ReactEcharts option={option} notMerge={true} lazyUpdate={true} />
);

图表的基本配置项可参考官方案例，这里就不一一展开说明了。

二、常见问题解决技巧

1、ECharts 饼图中占比小的扇区很小或不展示

某项数据占比小，饼图所占空间也会比较小，会出现该项扇形不展示的问题，效果如图所示

解决办法：添加 minAngle 属性，设置扇区最小角度

series: [{
    type: "pie",
    minAngle:10
}]

缺点是饼图的比例与实际比例会不一致, 此方式适用于对图表不敏感而对数据敏感的情况下使用

2、修改调色盘颜色

解决办法：添加 color 属性

color: [
    '#4d80f0',
    '#FCAC65',
    '#FCE447',
    '#A994EB',
    '#FF9696',
    '#55CEFA',
    '#f88453',
    '#9a60b4',
    '#ea7ccc',
    '#6da56c',
]

修改前默认颜色

修改后颜色

3、tooltip 超过容器的部分显示不全

问题如图所示

解决办法：添加 appendToBody 属性，让tooltip所在容器放在body下，而不是放在图表所在的容器中

tooltip: {
    appendToBody: true 
}

4、tooltip显示内容较多时，超出显示不全

和上面的问题一样，但有不同的解决方案

解决办法： 添加 confine 属性

tooltip: {
    confine: true // 是否将 tooltip 框限制在图表区域内
}

5、tooltip 提示框浮层内容自定义

解决办法：添加 formatter 属性, marker是当前曲线圆点色值

tooltip: {
   formatter: (item) => {
        return [
            `${item[0].marker}`,
            `${item[0].seriesName}`,
            `${item[0].value}万`,
        ].join('\n');
    },
}

6、tooltip 自定义数值显示部分

解决办法：添加 valueFormatter 属性

tooltip: {
   valueFormatter:  (value) => `${value}万`
}

7、X轴标签过长，展示不全

问题如图所示

解决办法1：添加 interval 和 rotate 属性， 强制显示所有标签，刻度标签旋转角度展示

xAxis: {
  axisLabel: {
    interval: 0, // 0 强制显示所有标签, 默认auto
    rotate: 30 // 刻度标签旋转的角度
  }
}

解决办法2：添加 formatter 属性，省略号表示

xAxis: {
    axisLabel: {
        formatter: function (value) {
            return  value.length > 2 ? `${value.substring(0, 2)}...` : value;
        }
    }
}

8、柱状图, 个数不同宽度显示不一致

8条数据如图所示

10条数据如图所示

解决办法：增加 barMaxWidth 属性，设置一个最大宽度值

series: [
  {
      type: 'bar',
    barMaxWidth: 30 // 可以是绝对值例如 30 
  }
]

9、折线图不显示折线点

解决办法：增加 symbol 属性，设置为 'none'

series: [
    {
        symbol: 'none'
    }
]

10、折线图平滑展示

解决办法：增加 smooth 属性，设置为 true

series: [{
    smooth: true
}]

11、折线图不展示分割线

解决办法：增加 splitLine 属性，show属性设置为false

yAxis: {
    splitLine: {
        show: false, 
    },
}

12、折线图两边留白

解决办法：增加 boundaryGap 属性，设置为true

xAxis: {
    boundaryGap: true
}

13、折线图Y轴只展示最小和最大

解决办法：增加 interval 属性，值设置为，y轴数据中最大值及以上

yAxis: {
    interval: 10000
}

14、折线图第二条折线数据堆叠

原因：设置了 stack: 'Total', 在echarts官网的配置项手册中有提到stack，就是数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加，所以导致数据是不会重叠在一起的

解决办法：删除stack: 'Total'属性

series: [{
    stack: 'Total' // 删除
}, {
    stack: 'Total' // 删除
}]

15、图表在旧容器上重新渲染不出来问题

原因：Echarts 每次实例化都会在容器标签上产生一个唯一的 echartsInstance ID，不能在单个容器上初始化多个 ECharts实例。

解决办法：Echarts 每次实例化都会在容器标签上产生一个唯一的 echartsInstance ID，那可以重新渲染之前把容器标签的 echarts_instance 属性移除，重新 echarts.init 后就会自动生成一个新的 echartsInstance ID ，此后图表就可以正常渲染了。

const chartEle = document.getElementById('chartId');

var myChart = echarts.init(chartEle);

myChart.clear() || chartEle.removeAttribute('_echarts_instance_'); // 移除容器标签的 '_echarts_instance_' 实例属性，使用echarts.init重新生成一个新的实例ID
myChart.setOption(option)

16、控制台出现 There is a chart instance already initialized on the dom 警告

原因：在React中将echarts绑定到React原型中，相当于在React原型里封装了一个创建echarts方法，所以每次调用该方法时候创建的图表使用的dom节点都会是同一个，就会在控制台报警告。

解决办法：先调用echarts.getInstanceByDom()方法判断是否已经存在echarts实例，如果不存在再去初始化。

this.myChart = this.$echarts.getInstanceByDom(document.getElementById("main"));
if (this.myChart == null) {
    // 如果不存在，就进行初始化
    this.myChart = this.$echarts.init(document.getElementById("main"));
}

本篇文章中我们介绍 ECharts 在 React 项目中使用和遇到问题的探索与总结，希望对大家有所帮助。ECharts 的妙处还有很多，这些都只是ECharts的皮毛，深层次的内容还需进一步学习研究。