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來進行設置。