ECharts自定义图表的线型由实线改为虚线或点线

Question

我使用 Apache ECharts to draw a vertical line from the input data. Following ECharts documentation 和一些在线示例创建了一个自定义图形，我能够绘制线条并根据下面的 MWE 使用颜色或宽度对其进行自定义。

我的问题是如何将线条样式配置为点线或虚线。我进行了广泛搜索，但找不到任何选项或文档。

const chart = echarts.init(document.getElementById("chart"));

const render = (_, api) => {
  const start1 = api.coord([api.value(0), api.value(1)]);
  const end1 = api.coord([api.value(0), api.value(2)]);
  const x1 = start1[0];
  const y1 = start1[1];
  const x2 = end1[0];
  const y2 = end1[1];
  const line = {
    type: "line",
    shape: {
      x1,
      y1,
      x2,
      y2
    },
    style: {
      stroke: "blue",
      lineWidth: 3
    }
  };

  return {
    type: "group",
    children: [line]
  };
};

const options = {
  xAxis: {
    min: 0,
    max: 2,
    interval: 1
  },
  yAxis: {
    min: 0,
    max: 4,
    interval: 1
  },
  series: [{
    type: "custom",
    data: [
      [1, 1, 3]
    ],
    renderItem: render
  }]
};
chart.setOption(options);

<!DOCTYPE html>
<html>

<head>
  <title>ECharts custom line</title>
  <meta charset="UTF-8" />
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js" integrity="sha256-TI0rIaxop+pDlHNVI6kDCFvmpxNYUnVH/SMjknZ/W0Y=" crossorigin="anonymous"></script>
</head>

<body>
  <div id="chart" style="width: 50%; height: 200px; position: absolute; top:0; left:0"></div>
</body>

</html>

MWE：https://codesandbox.io/s/echarts-custom-vertical-line-442cv

Answer 1

您可以在echarts中轻松制作自定义虚线。您需要将lineDash传递给图形元素对象。

lineDash 是 line 的 stroke-dasharray 属性，用于定义破折号和间隙的样式。以数字数组的形式传递破折号和间隙的值。

const render = (_, api) => {
  const start1 = api.coord([api.value(0), api.value(1)]);
  const end1 = api.coord([api.value(0), api.value(2)]);
  const x1 = start1[0];
  const y1 = start1[1];
  const x2 = end1[0];
  const y2 = end1[1];
  const line = {
    type: "line",
    shape: { x1, y1, x2, y2 },
    style: {
      stroke: "blue",
      lineWidth: 4,
      lineDash: [2] // put dash, gap values here
    }
  };

  return {
    type: "group",
    children: [line]
  };
};

ECharts自定义图表的线型由实线改为虚线或点线

How to change the line style of ECharts custom graph from solid to dashed or dotted

javascript

echarts