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: '平仓线'           // 设置平仓基线
                            }
                        }

                    }
                }
            ]
        };

 

 

效果图:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章