markLine 标示线的使用

markLine 可以单独写在一个对象里,也可以接在其它数据下面,如果将 markLine 单独写在一个对象里,就必须加 type ,不然报错。

markLine 的 data 和其它 data 一样,也可以单独设置样式。

markLine 可以在 X 轴上,也可以在 Y 轴上 (竖向、横向)

series: [
    {
        name: "监测数据",
        type: "line",
        smooth: true, //是否平滑,布尔类型/数字类型0~1,true = 0.5
        data: xxxData
    },
    {
        type: "line", //如果将 markLine 单独写在一个对象里,就必须加 type ,不然报错。
        markLine: {
            symbol: "none", //相当于["none", "none"] [虚线,没有箭头]
            silent: true, // true 不响应鼠标事件
            data: [{
                xAxis: "sun" //对于x轴中的一个值
            }],
            label:{
                color: "red",
                fontSize: 20,
                formatter: function () {
                    return "想展示的话"
                }
            },
            label: {
                color: "red",
                width: 1,
                type: "solid" //实线,不写默认虚线
            }
        }
    },
    {
        type: "line",
        markLine: {  //样式可以单独设置,也可以一起设置
            symbol: "none",
            silent: true,
            data:[
                {
                    yAxis: "20",
                    //type: "min/max/average" //特殊的标注类型,用于标注最大值最小值等。
                    lineStyle: { //线的样式
                        color: "#77D048",
                        width: 1,
                        opacity: 0.8
                    },
                    label: { //文字的样式,默认是白色,有时候文字不显示,可能是颜色的问题
                        color: "#77D048"
                    }
                },
                {
                    yAxis: "40",
                    lineStyle: { //线的样式
                        color: "#EFCA2A",
                        width: 1,
                        opacity: 0.8
                    },
                    label: { //文字的样式,默认是白色,有时候文字不显示,可能是颜色的问题
                        color: "#EFCA2A"
                    }
                }
            ],
            label: {
                padding: [-13, -40, 0, 0],
                formatter: function(params) {
                    return `${params.value}`
                }
            }
        }
    }
]

猜你喜欢

转载自www.cnblogs.com/MrZhujl/p/11644035.html