markLine 标示线的使用

08/09 14:27
阅读数 48

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

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

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

symbol 的几种样式 :默认["circle","arrow"]。circle圆 | rect长方 | roundRect圆长方 | triangle三角 | diamond菱形 | pin大头针 | arrow箭头 | none没有

series: [
  {
    name: "监测数据",
    type: "line",
    smooth: true, // 是否平滑,布尔类型/数字类型0~1,true = 0.5
    data: []
  },
  {
    type: "line", // 如果将 markLine 单独写在一个对象里,就必须加 type ,不然报错。
    markLine: {
      symbol: "none", // 相当于["none", "none"] [虚线,没有箭头]
      silent: true, // true 不响应鼠标事件
      data: [
        {
          xAxis: "sun" // 对于x轴中的一个值
        }
      ],
      label: {
        show: true, // 是否展示文字
        color: "red",
        fontSize: 20,
        formatter: function () {
          return "想展示的话"
        }
      },
      lineStyle: {
        color: "red",
        width: 1, // 0 的时候可以隐藏线
        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}`
        }
      }
    }
  }
]
隐藏 markLine:
  lineStyle.width = 0, label.show = false 时可以隐藏 markLine

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部