eCharts 折线图一段是实线，一段是虚线的实现效果

LXXgalaxy

已于 2024-04-22 10:57:19 修改

阅读量1.2k

点赞数 9

分类专栏： javascript echarts 文章标签： echarts 前端 javascript

于 2024-04-22 09:19:52 首次发布

本文链接：https://blog.csdn.net/galaxyJING/article/details/138059103

版权

javascript 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

echarts

17 篇文章 0 订阅

订阅专栏

文章讲述了在ECharts图表中，如何在`lineStyle`中使用数据拼接实现虚线效果，包括在官方示例和项目实践中的应用，如创建全null数组并拼接给定数据。

摘要由CSDN通过智能技术生成

在lineStyle里写了不生效的话，可以尝试数据拼接

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224,218 ,,,],
      type: 'line'
    },
     {
      data: [,,, 218, 135, 147, 260],
      type: 'line',
      lineStyle: {
        type: "dashed"
      }
    }
  ]
};

官网线上试了一下，这应该是最简单的实现方式了

我在我们项目里面实现的效果

后台给了数据后，虚线从哪里拼接，然后拼接上对应长度的null就行了

 let array = [];
var yclist  = [];
 for (let i = 0; i < 所需长度; i++) {
                        array[i] = null;//创捷一个对应的全部是null的数组
 }
yc = array.concat(yclist)//拼接上对应长度的null