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",
        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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM