在 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