在 Apache echarts 中拖動垂直標記線

Question

我想在折線圖中添加幾條垂直標記線並允許用戶進行水平拖動，類似於這個 Highcharts 示例。

在這個意義上，設置xAxis.axisPointer很有用。 但是，我怎樣才能讓整個垂直線被拖動到水平線上，而不是使用底部的按鈕，如下所示？

import "./styles.css";
import echarts from "echarts";

const myChart = echarts.init(document.getElementById("app"));

const option = {
  xAxis: {
    type: "time",
    nameLocation: "center",
    nameGap: 20,
    interval: 420000,
    min: 1625741884000,
    max: 1625749084000,
    axisLabel: {
      rotate: 0
    },
    boundaryGap: ["0%", "0%"],
    axisPointer: {
      value: 1625742000000,
      snap: true,
      lineStyle: {
        color: "#ff0000",
        width: 4
      },
      handle: {
        show: true,
        color: "#ff0000"
      }
    }
  },
  yAxis: [
    {
      type: "value",
      nameLocation: "center",
      nameGap: 8,
      interval: 0.33,
      min: 1,
      max: 5.33,
      axisLabel: {
        margin: 24,
        rotate: 0
      }
    }
  ],
  series: [
    {
      id: "test",
      name: "Average Time",
      yAxisIndex: 0,
      data: [
        {
          value: [1625741884000, 1]
        },
        {
          value: [1625741885000, 1]
        },
        {
          value: [1625741890000, 1]
        },
         ...

      ],
      subSeries: [],
      invert: false,
      type: "line",
      showSymbol: false,
      symbolSize: 5,
      smooth: false,
      color: "#4da6e8",
      lineStyle: {}
    }
  ]
};

myChart.setOption(option);

Answer 1

據我所知，沒有辦法在同一個圖表上擁有 2 個axisPointer 。 我一直在尋找這個功能一段時間，但我仍然找不到完美的解決方案。 使用graphics的解決方法可用於實現與您想要的類似的東西，但它遠非完美。 我仍然分享它，以防它對你有任何幫助。

 var myChart = echarts.init(document.getElementById('main')); let base = +new Date(1988, 9, 3); let oneDay = 24 * 3600 * 1000; let data = [[base, Math.random() * 300]]; for (let i = 1; i < 20000; i++) { let now = new Date((base += oneDay)); data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]); } option = { grid: { top: '40px', bottom: '60px', left: '50px', right: '30px' }, xAxis: { type: 'time', boundaryGap: false, axisLine: {onZero: false}, axisPointer: { show: true, type: 'line', }, }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, series: [ { name: 'Fake Data', type: 'line', smooth: true, symbol: 'none', areaStyle: {}, data: data } ], graphic: { elements: [ { type: 'group', left: 'center', draggable: 'horizontal', ondrag: function (params) { var pointInPixel = [params.offsetX, params.offsetY]; var pointInGrid = myChart.convertFromPixel('grid', pointInPixel); var xTime = new Date(pointInGrid[0]) //get closest value from cursor var point = data.reduce((prev, curr) => Math.abs(new Date(curr[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev[0]).valueOf() - xTime.valueOf()) ? curr : prev) //console.log('poi', new Date(pointInGrid[0]), new Date(point[0]), point[1]) var d = document.getElementById('value2'); d.style.left = params.offsetX+'px'; d.innerHTML = point[1] }, children: [ { id: 'bar1', type: 'rect', top: '30px', shape: { width: 2, height: 685 }, style: { fill: "#ff0000" }, cursor: 'ew-resize' }, { type: 'circle', top: '740px', shape: { r:10 }, style: { fill: "#ff0000" }, } ] }, { type: 'group', left: '150px', draggable: 'horizontal', ondrag: function (params) { var pointInPixel = [params.offsetX, params.offsetY]; var pointInGrid = myChart.convertFromPixel('grid', pointInPixel); var xTime = new Date(pointInGrid[0]) //get closest value from cursor var point = data.reduce((prev, curr) => Math.abs(new Date(curr[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev[0]).valueOf() - xTime.valueOf()) ? curr : prev) //console.log('poi', new Date(pointInGrid[0]), new Date(point[0]), point[1]) var d = document.getElementById('value1'); d.style.left = params.offsetX+'px'; d.innerHTML = point[1] }, children: [ { type: 'rect', top: '30px', shape: { width: 2, height: 685 }, style: { fill: "#0000ff" }, cursor: 'ew-resize' }, ] }, ]} }; myChart .setOption(option)

 <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script> <div id="main" style="width: 1200px; height:775px;"></div> <div id="value1" style="background-color: blue; color: white; position: absolute; top: 280px; left: 185px">0</div> <div id="value2" style="background-color: red; position: absolute; top: 280px; left: 605px">0</div> </body> </html>

graphic.elements.ondrag函數非常有趣，因為它允許沿光標獲取系列的值。 在此示例中，該值顯示在“光標”上方的 div 中，但它可以在其他地方以更漂亮的方式顯示。

在 Apache echarts 中拖動垂直標記線

問題描述

1 個解決方案

解決方案1
1 已采納 2022-06-21 15:30:02

在 Apache echarts 中拖動垂直標記線

問題描述

1 個解決方案

解決方案1 1 已采納 2022-06-21 15:30:02

解決方案1
1 已采納 2022-06-21 15:30:02