标线markLine的用法

最新推荐文章于 2025-06-17 22:50:46 发布

weixin_30312659

最新推荐文章于 2025-06-17 22:50:46 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yifanSJ/p/9553525.html

博客介绍了标线markLine的用法，给出了其在series中的配置示例。包括设置线条样式、标签显示位置，还列举了多种数据配置方式，如平均线、指定Y轴值的水平线、最小值到最大值的标线等，代码示例清晰展示了不同场景下的使用。

series: [{
    markLine: {
        itemStyle: {
            normal: { lineStyle: { type: 'solid', color:'#000' },label: { show: true, position:'left' } }
        },
        data: [
            {
                name: '平均线',
                // 支持 'average', 'min', 'max'
                type: 'average'
            },
            {
                name: 'Y 轴值为 100 的水平线',
                yAxis: 100
            },
            [
                {
                    // 起点和终点的项会共用一个 name
                    name: '最小值到最大值',
                    type: 'min'
                },
                {
                    type: 'max'
                }
            ],
            [
                {
                    name: '两个坐标之间的标线',
                    coord: [10, 20]
                },
                {
                    coord: [20, 30]
                }
            ], [{
                // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
                yAxis: 'max',
                x: '90%'
            }, {
                type: 'max'
            }],
            [
                {
                    name: '两个屏幕坐标之间的标线',
                    x: 100,
                    y: 100
                },
                {
                    x: 500,
                    y: 200
                }
            ]
        ]
    }
}]

转载于:https://www.cnblogs.com/yifanSJ/p/9553525.html