ECharts——柱狀折線圖+雙Y軸+水平基線

option = {
            title: [
                {
                    text: '',
                    left: 'center'
                }
            ],
            //當trigger爲’item’時只會顯示該點的數據，
            //爲’axis’時顯示該列下所有座標軸所對應的數據。
            //提示框組件
            tooltip: {
                //？觸發類型
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                left: 'center',
                bottom: 10,
                data: ['a1','b2', 'c3'],
                textStyle: {  // 統計項的樣式
                    color: "#595959",
                    fontSize: 14
                },
                itemGap: 80
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category', //category:類目軸(適用於離散無序數組)
                data: ['2019/8/1','2019/9/1','2019/10/1','2019/11/1','2019/12/1','2020/1/1','2020/2/1','2020/3/1','2020/4/1','2020/5/1','2020/6/1','2020/7/1'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#595959", //X軸文字顏色
                        fontSize:14       // x軸文字大小
                    },
                    interval:0,         // 刻度間隔
                    rotate:0,          // 傾斜角度
                    align: 'center',      // x軸文字居中
                    margin: 10          // 文字與x軸的間隔
                },
                axisLine: {
                    lineStyle: {
                        color: '#595959'  // x軸顏色
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: "",
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#595959", //y軸文字顏色
                            fontSize:14       // y軸文字大小
                        },
                        formatter: '{value}'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#595959'  // y軸顏色
                        }
                    }
                },
                {
                    type: 'value',
                    axisLine: {
                        show: true
                    }, 
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#595959", //y軸文字顏色
                            fontSize:14       // y軸文字大小
                        },
                        formatter: '{value}'
                    }, 
                    name: '',
                    max: 3,
                    min: 0,
                    splitLine:{show:false}
                }
            ],
            series: [
                // bar: 柱狀圖; line: 直線
                {
                    name: 'a1',
                    type: 'bar',
                    stack: 'one',
                    barWidth: 25, // 柱子的寬度
                    itemStyle: {
                        normal: {
                            color: '#267CFF',
                            opacity: 0.6
                        }
                    },
                    data: [1000, 2000,3000]
                },
                {
                    name: "b2",
                    type: 'bar',
                    barWidth: 25, // 柱子的寬度
                    itemStyle: {
                        normal: {
                            color: '#FA8C16',
                            opacity: 0.6
                        }
                    },
                    data: [1100, 2100, 3100],
                    markLine: {
                        silent: true,
                        lineStyle: {
                            normal: {
                                color: '#333',                  // 設置安全基線顏色
                                type: "solid" // 實線，不寫默認虛線
                            }
                        },
                        data: [{
                            yAxis: 3000     //這兒定義基準線的數值爲多少
                        }],
                        label: {
                            normal: {
                                formatter: '警戒線'           // 設置警戒基線
                            }
                        }

                    }
                },
                {
                    name: 'c3',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#21C6C6',
                            opacity: 0.6
                        }
                    },
                    data: [3000, 3100, 3200],
                    markLine: {
                        silent: true,
                        lineStyle: {
                            normal: {
                                color: '#21C6C6',                  // 設置平倉基線顏色
                                type: "solid" // 實線，不寫默認虛線
                            } 
                        },
                        data: [{
                            yAxis: 2000     //這兒定義基準線的數值爲多少
                        }],
                        label: {
                            normal: {
                                formatter: '平倉線'           // 設置平倉基線
                            }
                        }

                    }
                }
            ]
        };

 

 

效果圖: