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

原创已于 2024-05-27 09:41:46 修改 · 2.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts #前端 #javascript

于 2024-03-14 14:41:32 首次发布

javascript 同时被 2 个专栏收录

43 篇文章

订阅专栏

echarts

20 篇文章

订阅专栏

本文介绍了如何在ECharts库中创建一条折线图，其中一部分使用实线，另一部分使用虚线。作者详细展示了如何配置x轴和y轴数据，以及线条类型。

option = {
    title: {
        text: '实线与虚线结合的折线图'
    },
    tooltip: {
        trigger: 'axis'
    },
    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"
      }
    }
  ]

}