react ECharts 使用后小结

本文主要讲述在react中使用ECharts图表工具echarts-for-react，文中列举出三个例子，即饼图Pie 折线图Line 柱状图Bar.

安装依赖echarts-for-react

npm install echarts-for-react --save

效果图

---

饼图Pie

---

折线图Line

---

柱状图Bar

使用

1. 基本使用

import ReactEcharts from 'echarts-for-react'; var echartsOption = { } //配置项 render() { return ( <ReactEcharts ref={(e) => { this.echartsElement = e }} option={echartsOption} theme="clear" /> ) }

2.案例使用

针对不同的图表，只需改echartsOption配置即可

// 饼图Pie var colorArr = ['#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0', '#13c2c2', '#3436c7', '#f04864']; var echartsOption = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data:['天海湾','鼎龙湾','珍珠湾','翠逸家园','紫林湾'] //需要对应 series 的 name值 }, color: colorArr, series: [ { name:'访问来源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '20', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ //由于颜色的原因，这里应该对数据做一下排序~ {value:1548, name:'天海湾'}, {value:510, name:'鼎龙湾'}, {value:338, name:'珍珠湾'}, {value:265, name:'翠逸家园'}, {value:220, name:'紫林湾'} ] } ] }; //折线图Line var colorArr = ['#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0', '#13c2c2', '#3436c7', '#f04864']; var echartsOption = { title: { text: ' ' }, tooltip: { trigger: 'axis' }, legend: { //需要对应 series 的 name值 data:['天海湾','鼎龙湾','珍珠湾','翠逸家园','紫林湾'] }, color: colorArr, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, // saveAsImage: {} //存取为图片 } }, xAxis: { type: 'category', boundaryGap: false, data: ['10:00','11:00','12:00','13:00','14:00','15:00','16:00'] }, yAxis: { type: 'value' }, series: [ { name:'天海湾', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'鼎龙湾', type:'line', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'珍珠湾', type:'line', stack: '总量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'翠逸家园', type:'line', stack: '总量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'紫林湾', type:'line', stack: '总量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; //柱状图Bar var echartsOption = { title : { text: ' ', subtext: ' ' }, tooltip : { trigger: 'axis', axisPointer : {// 坐标轴指示器，坐标轴触发有效 type : 'line'// 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['成交量'] }, toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, } }, calculable : true, xAxis : [ { type : 'category', data : ['天海湾','鼎龙湾','珍珠湾','翠逸家园','紫林湾', '田螺湾', '香海彼岸', "花城都汇", "天蕴皖",'珍珠湾','翠逸家园','紫林湾', '田螺湾', '香海彼岸'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'成交量', type:'bar', data:[2100, 909, 7200, 1232, 4256, 5409, 1700, 6232, 3256, 7900, 1232, 4256, 5409, 1700], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ] };

---

最后

具体配置项，可以直接访问官网http://echarts.baidu.com/api.html#echarts， 或者点击这里查看常用的具体配置项https://blog.csdn.net/genius_yym/article/details/80886792