zoukankan      html  css  js  c++  java
  • markLine 标示线的使用

    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",
             1, // 0 的时候可以隐藏线
            type: "solid" // 实线,不写默认虚线
          }
        }
      },
      {
        type: "line",
        markLine: { // 样式可以单独设置,也可以一起设置
          symbol: "none",
          silent: true, // 鼠标移上是否有响应(线变粗)
          data: [
            {
              yAxis: "20",
              //type: "min/max/average" // 特殊的标注类型,用于标注最大值最小值等。
              lineStyle: { // 线的样式
                color: "#77D048",
                 1,
                opacity: 0.8
              },
              label: { // 文字的样式,默认是白色,有时候文字不显示,可能是颜色的问题
                color: "#77D048"
              }
            },
            {
              yAxis: "40",
              lineStyle: { // 线的样式
                color: "#EFCA2A",
                 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
  • 相关阅读:
    k8s用kubectl管理应用升级,服务发布与回滚,扩缩容
    K8s遇到问题解决思路
    Kafka常用命令之kafka-topics.sh
    Kafka常用命令之kafka-console-consumer.sh
    maven idea设置查找依赖优先从指定的本地仓库获取
    Java isAlive()方法的作用
    intellij 格式化 代码
    kafka后台启动的命令
    Kafka 集群部署,启动,关闭,命令行操作
    jquery请求ajax对返回数据解析
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/11644035.html
Copyright © 2011-2022 走看看