一种饼图的实现

饼图.png

用echarts实现上述样式的饼图，每种颜色代表的是一种类型的故障，由于后端返回的数据可能只有几条，所以首先需要处理下，依照每类所占的比例生成一个有足够数据量的数组，然后设置series里的itemStyle属性：

itemStyle: {
  normal: {
    borderColor: '#041359',
    borderWidth: 5,
  },
},

这样就能实现上述样式的饼图了

echarts字体自适应

由于屏幕分辨率的不同，echarts中显示的字体大小会发生变化，下面是一种处理方法：

setEchartsFontSize(fontSize) {
    const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    if (!clientWidth) {
      return 12;
    }
    return fontSize * clientWidth / 1920;
  }

通过获取当前浏览器的宽度来实现字体大小的自适应。

浏览器进行resize操作时重置echarts图

这是一个很常见的需求，不过当在React中使用echarts-for-react时需要注意先获取到echarts图的实例：

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

<ReactEcharts option={this.Option} ref={(e) => { this.chart = e;}} />

window.addEventListener('resize', () => {
      const chartInstance = this.chart.getEchartsInstance();
      setTimeout(() => {
        chartInstance.resize();
      }, 150);
});