【Echarts 绘制柱状图、折线图和扇形图】

1. 柱状图和折线图

柱状图和折线图的基本内容完全一致，只需要将option中的series的type: ‘bar’ 修改type: ‘line’，就可以将柱状图转化为折线图。

initEchart(data) {  //data为传入的数据，格式为[{},{},...,{}]
        let that = this
        if (this.chart) {
            this.chart.dispose();
        }
        this.chart = echarts.init(document.getElementById('OperationChars'));//选择想要创建图表在哪个根节点
        if (data.length > 0) { //数据存在的时候对数据进行处理
            let arr1 = []; let arr2 = []; //arr1存放横坐标，arr2存放纵坐标的数据
            for (let i = 0; i < data.length; i++) {
                arr1.push(data[i].AREA);
                let obj = {}
                obj.count = data[i].EDID;
                obj.INDUSTRYCATEGORY = data[i].AREA;
                arr2.push(obj);
            }
            let option = { //对柱状图或折线图的设置
                backgroundColor: '#fff', //图表整体的背景颜色
                borderWidth: 1, //柱状图的每个柱子的宽度
                borderColor: '#fff',
                tooltip: {
                    trigger: 'axis', //触发坐标轴
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'，选择line的时候鼠标悬浮时是一条线，shadow悬浮时是一个宽的柱体
                    }
                },
                xAxis: [  //对横坐标进行设置
                    {
                        type: 'category', 
                        data: arr1,  //横坐标的数据
                        axisLine: {
                            lineStyle: { //横坐标坐标轴的颜色和宽度设置
                                color: '#CED3DA', 
                                width: 2
                            }
                        },
                    }
                ],
                yAxis: [	//纵坐标设置
                    {
                        type: 'value',
                        name: '次数',  
                        splitLine: { show: true },  //是否去除网格线，true为显示，false为去除 
                        axisLine: {
                            lineStyle: {  // 横坐标坐标轴的颜色、宽度和纵坐标上的字体大小设置
                                color: '#CED3DA',
                                width: 2,
                                fontSize: 14,
                            }
                        },
                    }
                ],
                legend: {  //标记柱状图每个颜色的代表含义
                    data: ['企业数量'],      //图例名称 
                    right: 50,                              //调整图例位置
                    top: 20,                                  //调整图例位置
                    itemHeight: 10,                      //修改icon图形大小
                    icon: 'rect',      //图例前面的图标形状，长方形为rect，圆形用circle
                    textStyle: {                            //图例文字的样式
                        color: '#CED3DA',               //图例文字颜色
                        fontSize: 14                      //图例文字大小
                    }
                },
                series: [
                    {
                        type: 'bar',  // 编写折线统计图时将其修改为line
                        name: '企业数量',
                        showAllsymbol: true,
                        // barWidth: '5px',
                        itemStyle: {
                            normal: {
                                color: '#333'
                            }
                        },
                        data: arr2.map(i => i.count)  //通过循环获取到想要展示的数据
                    }
                ]
            }
            this.chart.setOption(option,true);
        }
    }

2. 扇形图

initEchart(data) {
        let { startTime, endTime, arrNum } = this.state
        let that = this
        if (this.chart) {
            this.chart.dispose();
        }
        let colorList = ["#green","#red","#pink","#gray","#yellow","#blue"]
        this.chart = echarts.init(document.getElementById('OperationChars'));
        if (data.length > 0) {
            let arr3 = []; let arr4 = [];
            for (let i = 0; i < data.length; i++) {
                arr3.push(data[i].name);
                let obj = {}
                obj.id= data[i].id;
                obj.name = data[i].name;
                arr4.push(obj);
            }
            let option = {
                backgroundColor: '#fff',
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}次'
                },

                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: '30%',
                    bottom: 20,
                    data: arr3,
                    textStyle: {                            //图例文字的样式
                        color: '#CED3DA',               //图例文字颜色
                        fontSize: 12                      //图例文字大小
                    },
                    icon: 'circle'
                },
                color: colorList, // 自定义颜色
                series: [
                    {
                        // z: 1,
                        name: '纳入企业名单的原因',
                        type: 'pie',
                        minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                        radius: ['40%', '60%'],
                        center: ['22%', '50%'],
                        splitLine: {
                            distance: -30,
                            length: 10,
                            lineStyle: {
                                width: 2,
                                color: '#CED3DA'
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                                color: '#fff',
                                formatter: '总数量\n' + this.state.arrNum1 + '家',
                                textStyle: {                        //图例文字的样式
                                    color: '#CED3DA',               //图例文字颜色
                                    fontSize: 20                    //图例文字大小
                                }
                            },
                            formatter: '{b|{b}}\n({c})\n', // 这里的设置就是饼图的标签内容及其格式
                            rich: {
                                b: {
                                    align: 'center'
                                }
                            }
                        },
                        data: arr4
                    },
                ]
            };

            this.chart.setOption(option)
        }
}

在以下代码完成后，如果你的图表没有显示在页面上，别着急，那是因为你还需要在render中创建一个id为OperationChars的div，并且这个节点需要设置高度，不设置高度的话显示出来的可能是一条线。
例如：

render(
<div>
	<div id="OperationChars" style={{height:"500px"}}></div>
<div>
)