echarts常用技巧

//存储echarts所有对象
    echartsList = [];

    //根据浏览器的大小拖动自动调整echarts大小
    window.onresize = function () {
        for (let i = 0; i < echartsList.length; i++) {
            echartsList[i].resize();
        }
    };
//生成扇形图
function generatePieChart(data) {
        var dom = document.getElementById("pie");
        var myChart = echarts.init(dom, 'light');
        var app = {};
        option = null;
        option = {
            title: {
                text: '',
                x: 'left',
                padding: [15, 20],
                textStyle: {
                		fontSize: 14
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            // color:['#86dde1','#eb7a94','#e0beef','#807be3'],
            color:color,
                legend: {
                x: 'center',
                y: 'bottom',
                data:['1','2','3','4']
            },
            toolbox: {
                show: false,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [{
                name: '',
                type: 'pie',
                radius: [60, 170],
                center: ['50%', '50%'],
                roseType: 'area',
                data: data
            }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        echartsList.push(myChart);
    }
//柱状图
function generateLineCharts(xdata, ydata) {
        var dom = document.getElementById("line");
        var myChart = echarts.init(dom, 'light');
        var app = {};
        option = null;
        option = {
            color: ['#54a1d5'],
            toolbox: {
                show: false,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: [
                {
                    type: 'category',
                    data: ydata,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            xAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '评论',
                    type: 'bar',
                    barWidth: '60%',
                    data: xdata
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        echartsList.push(myChart);
    }