ECharts在React+Antd用法及常见错误_antdecharts资源-CSDN文库

5星 · 超过95%的资源 9 浏览量 2021-01-08 13:09:44 上传评论收藏 127KB PDF 举报

资源详情

资源评论

资源推荐

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',

},

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论10

shkpwbdkak

2023-06-14

这篇文章对于前端开发者来说很有参考价值，推荐收藏。

内容反馈

weixin_38609720

粉丝: 3
资源: 983

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip