在这里插入图片描述

markLine: {
              symbol: "none", //去掉警戒线最后面的箭头
              label: {
                position: "end", //将警示值放在哪个位置,三个值“start”,"middle","end"  开始  中点 结束
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有,false有
                  lineStyle: {
                    //警戒线的样式  ,虚实  颜色
                    type: "dashed",
                    color: "#FA3934",
                  },
                  yAxis: "", // 警戒线的标注值,可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'},type值有  max  min  average,分为最大,最小,平均值
                },
              ],
            },
后边手动设置yAxis的值 为数组中的最后一项
this.option.series[0].markLine.data[0].yAxis = this.param[
            this.param.length - 1
          ][1];

markLine: {
              symbol: ['none', 'none'], // none为标线两端的样式为无,可更改
              data: [
                {
                  silent: false,
                  xAxis: 50,  // 表现自定义的位置,可赋值
                  label: {
                    position: 'end', // 表现内容展示的位置
                    formatter: '中文路均值',  // 标线展示的内容
                    color: '#8C8C8C'  // 展示内容颜色
                  },
                  lineStyle: { type: 'solid', color: '#C1E7FF', width: 3 } // 样式: 线型、颜色、线宽
                }
              ]
            },

更改标准线提示信息位置

               label: {
                    position: 'top',
                    padding: [0, 0, 5, 0],
                    // left: 8,
                    normal: {
                        // formatter: '标准\n基线' // 这儿设置安全基线

                    }
                },

在这里插入图片描述

转载于 echarts的markline警标线的使用

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐