一种饼图的实现
饼图.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);
});
