react+antd+dva ---> Echarts-for-react 图表的使用(柱状图+多环形图)
1.引入
import ReactEcharts from 'echarts-for-react';
2.jsx里写入组件
1 2 3 4 5 6 7 8 9 | < ReactEcharts option={getOptionAxis( axisData.list )} style={{ width: '100%', height:'400px' }} /> |
3.外面render里写柱状图的options
// 绘制柱状图 const getOptionAxis = list => { return { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { data: Array.isArray(list) && list.length > 0 ? list.map(item => item.name) : [], icon: 'circle', itemWidth: 10, itemHeight: 10, itemGap: 20, x: 'center' }, xAxis: [ { type: 'category', data: getPath(this.state, 'sixMonth'), axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '总员工', splitLine: { lineStyle: { type: 'dashed' } }, axisLine: { show: false, lineStyle: { type: 'dashed' } } }, { type: 'value', name: '数量', splitLine: { lineStyle: { type: 'dashed' } }, axisLine: { show: false, lineStyle: { type: 'dashed' } } } ], series: list && list.length > 0 ? list.map(item => ({ name: item.name, type: item.name === '总员工数' ? 'line' : 'bar', data: item.value, itemStyle: { normal: { color: item.name === '总员工数' ? '#3BA0FF' : '#FAD337' } } })) : [] }; };
超级简单484
84!!!
需求还要一个多层环形图!
像这样!
点击外部,要求内部随之变动
点击legend(就是上面那一行文字示例),也要求两层环形图动态变化
ok。
1.jax写个组件
<ReactEcharts option={getOptionPie( pieData )} onEvents={{ click: this .onChartClick, legendselectchanged: this .onLegendClick }} style={{ width: '100%', height: '400px' }} />
x··············x··········注意············x···················x
onEvents={{
click: this
.onChartClick,
legendselectchanged: this
.onLegendClick
}}
这两个点击事件,是这么写的 ↑ ,第一个是环形图的点击事件,第二个是图例的点击事件
2.写图表options
// 绘制饼图 const getOptionPie = pieData => { const { chooseIndex } = this.state; const requestData = Array.isArray(pieData) && pieData.length > 0 ? pieData.map((item, index) => ({ name: item.name, value: item.value, selected: index === chooseIndex })) : []; const mydata = option3data.map((item, index) => { return { name: item.name, value: item.value, itemStyle: { normal: { label: { show: false }, labelLine: { show: false }, color: colorChoose, opacity: 1 - 0.1 * index } } }; }); return { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { type: 'scroll', data: requestData && requestData.length > 0 ? requestData.map(item => item.name) : [], icon: 'circle', itemWidth: 10, itemHeight: 10, itemGap: 20, x: 'center' }, series: [ { name: '部门', type: 'pie', radius: [0, '30%'], itemStyle: { normal: { label: { show: false }, labelLine: { show: false } } }, label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, data: mydata }, { name: '公司', type: 'pie', radius: ['40%', '55%'], selectedMode: 'single', itemStyle: { normal: { color(params) { return pieColor[params.dataIndex]; } } }, label: { normal: { position: 'inner', formatter: '{d}%', fontSize: 12 } }, data: requestData } ] }; };
3.点击事件:
// 环形饼状图外圈被点击 onChartClick = (param, echarts) => { if (param.componentIndex === 1) { const { dispatch, gateway } = this.props; const pieData = getPath(gateway, 'pieData', []); const params = getPath(pieData, `${param.dataIndex}.children`, []); dispatch({ type: 'gateway/getNewOption', payload: { option3data: params, colorChoose: param.color } }); this.setState({ chooseIndex: param.dataIndex }); } }; // 饼图legend 点击事件-确保内环跟随改变 onLegendClick = (param, echarts) => { const { dispatch, gateway } = this.props; const pieData = getPath(gateway, 'pieData', []); const { pieColor } = gateway; let newIndex = 0; // eslint-disable-next-line no-restricted-syntax for (const index in param.selected) { // eslint-disable-next-line no-prototype-builtins if (param.selected.hasOwnProperty(index)) { if (param.selected[index]) { this.setState({ chooseIndex: newIndex }); const params = getPath(pieData, `${newIndex}.children`, []); const paramsColor = getPath(pieColor[newIndex]); dispatch({ type: 'gateway/getNewOption', payload: { option3data: params, colorChoose: paramsColor } }); return; } newIndex += 1; } } };
批注:
(1)pieData是后端返回的数据,格式为:
渲染时外圈为最外层数据,内圈为对应的children里的数据
(2)option3data 存储的数据为内环数据
(3)colorChoose 存储当前被选中的数据的颜色(用来给内圈赋颜色)
(4)pieColor 存储外环的颜色库:
ps处理对象还有以下2种方法:
const array1 = Object.values(param.selected);
const array2 = Object.keys(param.selected);
console.log(array1, array2);

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析