vue Examples-图表添加固定警戒Y轴线

					var option = {
                        title: {
                            text: this.stockData.material + "    库存波动明细",
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        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: '平仓线'           // 设置平仓基线
                                        }
                                    }
            
                                }
                            }
                        ]
                        }

效果图:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值