ECharts在在React+Antd用法及常见错误用法及常见错误
最近项目中开始使用ECharts做图表,在React+Antd中使用Echart还是遇到了很多坑,希望记录下解决办法可以帮助到大家。由于初次使用,很多代码优化空间很大,希望大家能帮
我提出,感恩~
最终效果最终效果
1、实现点击折线图上的点联动两个饼图数据
2、处理ECharts饼图数据为0或者是空时饼图消失问题
2、、 在对在对ECharts图表进行图表进行init
// 饼图初始option
const initPieOption = {
// tooltip: {
// show: false,
// },
dataset: {
dimensions: ['desc', 'type', 'value'],
source: [{ desc: '', type: '', value: 1 }], // 当无数据时,给饼图个初始数据
},
grid: {
left: '3%',
right: '3%',
bottom: '0%',
containLabel: true,
},
series: [
{ type: 'pie',
radius: ['75%', '45%'],
stillShowZeroSum: false,
itemStyle: {
color: '#e7e7e7',
},
label: {
normal: {
show: true,
position: 'center',
formatter: function () {
var result = ''
result = '暂无数据'
return result
},
textStyle: {
fontSize: 16,
color: '#e2e2e2',
},
},
},
},
],
}
// 初始化图表
initChart = () => {
// const { trendList } = this.state
// 折线图
var lineChart = echarts.init(document.getElementById('echartLine'))
// 建议将ECharts图表实例进行储存,而不是每次数据变化都进行实例初始化
this.setState({ lineChart })
lineChart.setOption({
title: {
text: '趋势',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
评论10