echarts 版本3.x (常用配置项说明-)

这是我参与更文挑战的第5天，活动详情查看：更文挑战

现在echarts升级到5.x了，我们的项目用的是3.8.5, echarts官网现在已经没有3.x的相关文档了。。。。。。变化有点大，迁移没力气。自制个常用的文档吧

遇到过的小问题

• legend图例不显示的问题: 在legend中的data为一个数组项,数组项通常为一个字符串，每一项需要对应一个系列的 name,如果数组项的值与name不相符则图例不会显示;
• 初始化图表失败的问题 必须先有宽高，才能初始化。echarts初始化时获取不到画布宽高,导致绘制图表失败;
• echarts图表响应式的问题

$(window).on('resize',function(){
myChart.resize();
});

• 点击事件

myChart.on('click', function (params) { 
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); 
});

1、 饼图

option: {
    color: ['#01DF3A', '#FF8000', '#FF0000'], // 对应的主题颜色

    legend: {
        icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        itemWidth: 10, // 设置宽度
        itemHeight: 10, // 设置高度
        itemGap: 40, // 设置间距
        data: []
    },
    grid: { // 设置整个图表上下左右的距离--所有图通用
        top:'60',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true // true防止标签溢出,false可以解决图表位置无法紧贴画布边缘的问题
    },
    tooltip: {
        trigger: 'item',
        // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        formatter: '{b} <br/> {c} ({d}%)'
    },
    title: {
        text: '分类质量',
        top: 'center',
        left: 'center',
        textStyle: {
            rich: {
                val: {
                        fontSize: 22,
                        fontWeight: 'bold',
                        color: '#666'
                },
                name: {
                        fontSize: 18,
                        color: '#666',
                        padding: [10, 0]
                }
            }
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                        show: false
                }
            },
            labelLine: {
                    show: false
            },
            data: [{ value: 335, name: '优' }, { value: 310, name: '良' }, { value: 234, name: '差' }]
        }
    ]
}

2、折线图

option4: {
    color: ['#01DF01', '#FACC2E', '#FF0000', '#0080FF'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                    color: '#999'
            }
        },
        // 为了加单位,如果不需要加单位可以省略
        formatter: function(params) {
            let unit = 't';
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
            // 如果是同一个单位可以省略这个
                if (params[i].seriesName.indexOf('百分比') > -1 || params[i].seriesName.indexOf('率') > -1 || params[i].seriesName.indexOf('无害化') > -1) {
                        unit = '%';
                } else {
                        unit = 't';
                }
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + unit;
            }
            return relVal;
        }
    },
    // 图例
    legend: {
        x: 'center',
        y: 'top',
        data: []
    },
    // x轴
    xAxis: [
        {
            name: '日期',
            type: 'category',
            data: [
            ],
            splitLine: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '垃圾量(t)',
            min: 0, // 设置y轴最小值
            position: 'left',
            splitLine: {
                show: false
            }
        }
    ],
    series: [
        {
            name: '厨余垃圾',
            type: 'line',
            stack: '总量', // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。正常显示的可以删除
            data: []
        },
        {
            name: '其他垃圾',
            type: 'line',
            stack: '总量',
            data: [],
            label: {
                normal: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            emphasis: {
                label: {
                    show: false
                }
            },
        }
    ]
}