echarts 标记线markLine的使用

最新推荐文章于 2024-02-04 09:32:59 发布

逆风优雅

最新推荐文章于 2024-02-04 09:32:59 发布

阅读量1.1w

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_44603011/article/details/126157175

版权

echarts 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

效果图：在某个值处添加一条分割线

markLine写在 serise中

            series: [
                {
                    data: hl_YData,
                    type: 'bar',
                    barWidth: 40,
                    itemStyle: {
                        normal: {
                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#97D7DB', '#97D7DB', '#EAE88A', '#EAE88A', '#F7782C', '#F7782C',];
                                return colorList[params.dataIndex]
                            },
                            barBorderRadius: [10, 10, 0, 0],
                        },
                    },
                },
                {
                    type: 'bar',
                    markLine: {
                        silent: true, // 鼠标移动到标记线上无操作
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#ff0000',
                                }
                            }
                        },
                        label: {
                                    position: 'end', // 表现内容展示的位置
                                    formatter: markLineData=='0'?'':'异常阻抗分界线',  // 标线展示的内容
                                    color: '#8C8C8C'  // 展示内容颜色
                                },
                        data: [
                            {
                                xAxis: '150-200' // 分割线的位置
                            }

                        ]
//分割线也可以这样设置
//data: [
                    //         // [4,18] 第一个参数是x轴的index,第二个是y轴的最大值
                    //         [ {
                    //             coord: [4, markLineData]
                    //         },
                    //         ],
                    //
                    //     ]
                    }
                }

            ]