admin管理员组

文章数量:1389231

I created a custom graph using Apache ECharts to draw a vertical line from the input data. Following ECharts documentation and some online examples, I was able to draw the line and custom it with color or width as per the MWE below.

My question is how to configure the line style as dotted or dashed. I searched extensively but could not find any options or documentation on that.

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="/[email protected]/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>

I created a custom graph using Apache ECharts to draw a vertical line from the input data. Following ECharts documentation and some online examples, I was able to draw the line and custom it with color or width as per the MWE below.

My question is how to configure the line style as dotted or dashed. I searched extensively but could not find any options or documentation on that.

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/npm/[email protected]/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

  • javascript
  • echarts
Share Improve this question edited Jun 12, 2021 at 6:17 Alex asked Jun 12, 2021 at 6:02 AlexAlex 1721 gold badge2 silver badges12 bronze badges 2
  • You want todo something like this – kamlesh parmar Commented Jun 12, 2021 at 6:27
  • @kamleshparmar Many thanks, but the markLine way is not suitable in this case. I don't want extra lines because I already created my own render to draw the lines. The only configuration that I might have missed is to set the line style to dashed or dotted. I looked into markLine perhaps as the last resort. – Alex Commented Jun 12, 2021 at 8:15
Add a ment  | 

2 Answers 2

Reset to default 2

You can easily make custom dashed line in echarts. You need to pass lineDash to the graphic element object.

lineDash is stroke-dasharray attribute of line defining the pattern of dashes and gaps. Pass the values of dashes and gaps in form of an number array.

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]
  };
};

I did it by adding the lineStyle configuration to the series data as follows:

{
    name: "My Values",
    type: "line",
    data: dataSeries,
    lineStyle: {
        color: "#FFFFFF",
        type: "dashed",
        width: 2,
    },
}

本文标签：

版权声明：本文标题：javascript - How to change the line style of ECharts custom graph from solid to dashed or dotted - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744578331a2613764.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。