数据可视化在前端开发中经常会遇到，万恶的图表，有时候总是就差一点，可是怎么也搞不定。
别慌，咱们一起来研究。
引入我就不多说了 npm install echarts
对于基础的可视化组件，我一般采用组件封装的方式来使用echarts
当需要在项目中使用echarts做图表时，可以直接将其封装成一个组件
1 import React, { Component } from 'react'; 2 3 // 引入 ECharts 主模块 4 import echarts from 'echarts/lib/echarts'; 5 // 引入环形图 6 import 'echarts/lib/chart/pie'; 7 // 引入提示框和标题组件 8 import 'echarts/lib/component/tooltip'; 9 import 'echarts/lib/component/title'; 10 import 'echarts/lib/component/visualMap'; 11 12 export default class IndexPieData extends Component { 13 initCharts = () => { 14 const data = this.props.data; 15 var piedata = data.map((item, index) => { 16 return { 17 value: item.y, //value和name是echarts规定的，呜呜呜 18 name: item.x, 19 }; 20 }); 21 // 基于准备好的dom，初始化echarts实例 22 var myChart = echarts.init(document.getElementById('main')); 23 // 绘制图表 24 myChart.setOption({ 25 tooltip: { 26 trigger: 'item', 27 // formatter: "{a} <br/>{b}: {c} ({d}%)" 28 formatter: '{b}: {d}%', 29 }, 30 series: [ 31 { 32 name: '设备占比数量', 33 type: 'pie', 34 radius: ['50%', '60%'], 35 label: { 36 formatter: '{b}:{d}%', 37 textStyle: { 38 color: '#000000', 39 fontSize: 12, 40 }, 41 }, 42 data: piedata, 43 }, 44 }); 45 }; 46 47 componentDidMount() { 48 this.initCharts(); 49 } 50 componentDidUpdate() { //当图表切换的时候，重新执行 51 this.initCharts(); 52 } 53 render() { 54 return <div style={{ width: '100%', height: 311 }} />; 55 } 56 } //在需要使用的页面 引入并使用 import IndexPieData from '../'; <IndexPieData data={pieData} height={300}></IndexPieData>