echart设置双Y轴折线图（以及折线图格式设置）

百度的ECharts图标大大方便了我们的开发，但是各个区域默认属性的设置往往不切人意。这里我写了一些我用ECharts图标识折线图属性的设置方式。

option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                    ,
                    formatter: function (params) {
                        let html=params[0].name+"<br>";
                        for(let i=0;i<params.length;i++){
                            html+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'
                            if(params[i].seriesName=="扬尘平均离线率"){
                                html+=params[i].seriesName+":"+params[i].value+"%<br>";
                            }
                            if(params[i].seriesName=="扬尘超标项目数"){
                                html+=params[i].seriesName+":"+params[i].value+"次<br>";
                            }
                        }
                        return html;
                    }
                },

                legend: {
                    textStyle: {color: '#4CA6A3'},
                    x: 'right',
                    // data: ['扬尘超标项目数', '扬尘平均离线率']
                    data : [ {name : '扬尘超标项目数',icon:'rect'}, {name : '扬尘平均离线率',icon:'rect'} ]
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        //设置x轴线的属性
                        axisLine:{
                            lineStyle:{
                                color:'#4CA6A3', // 设置x轴字体颜色
                                width:2, // 设置x轴字体宽度
                            }
                        },
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis : [
                    {
                        type: 'value',
                        name:"扬\n尘\n超\n标\n项\n目\n数\n︵\n次\n︶",
                        nameLocation:"center",
                        nameGap:35,
                        nameRotate:0,
                        nameTextStyle:{
                            fontSize: 16,
                            color: '#293C55'
                        },
                        splitLine:{show: false},//去除y轴的网格线
                        //设置轴线的属性
                        axisLine:{
                            lineStyle:{
                                color:'#293C55',
                                width:2, //这里是为了突出显示加上的
                            }
                        }
                    },
                    {
                        type: 'value',
                        name:"扬\n尘\n平\n均\n离\n线\n率\n︵\n%\n︶",
                        nameLocation:"center",
                        nameGap:35,
                        nameRotate:0,
                        nameTextStyle:{
                            fontSize: 16,
                            color: '#293C55'
                        },
                        splitLine:{show: false},//去除网格线
                        min: 0,
                        max: 100,
                        interval: 10,
                        // 设置轴线的属性
                        axisLine:{
                            lineStyle:{
                                color:'#293C55',
                                width:2,//这里是为了突出显示加上的
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '扬尘超标项目数',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        itemStyle: {
                            normal: {
                                color: "#25DEDB",//折线点的颜色
                                lineStyle: {
                                    color: "#25DEDB"//折线的颜色
                                }
                            }
                        },
                        areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#25DEDB'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '扬尘平均离线率',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        itemStyle: {
                            normal: {
                                color: "#E96C44",//折线点的颜色
                                lineStyle: {
                                    color: "#E96C44"//折线的颜色
                                }
                            }
                        },
                        areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#E96C44'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    }
                ]
            };

设置完成后的样式：

百度的ECharts非常好用，没事的话多研究研究还是挺舒服的。欢迎大家一起交流学习。

附上ECharts官方API：https://www.echartsjs.com/zh/api.html#echarts，遇到没提起的设置信息可以自己查阅API来进行设置。