You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ECharts是否有类似ApexCharts中stroke.dashedArray的功能?

ECharts 实现系列虚线样式的方法

ECharts 完全支持为多系列图表中的指定系列设置虚线样式,对应配置在系列的lineStyle属性中完成,具体有两种实现方式:

1. 使用预设虚线类型

直接将lineStyle.type设置为'dashed'或'dotted',快速实现标准虚线/点线效果:

option = {
  xAxis: { /* 坐标轴基础配置 */ },
  yAxis: { /* 坐标轴基础配置 */ },
  series: [
    {
      name: '实线系列',
      type: 'line',
      data: [10, 20, 30, 40],
      lineStyle: {
        type: 'solid' // 默认实线,可省略
      }
    },
    {
      name: '虚线系列',
      type: 'line',
      data: [25, 15, 35, 20],
      lineStyle: {
        type: 'dashed' // 设置为虚线
      }
    },
    {
      name: '点线系列',
      type: 'line',
      data: [5, 30, 15, 45],
      lineStyle: {
        type: 'dotted' // 设置为点线
      }
    }
  ]
};

2. 自定义虚线间隔(对应ApexCharts的dashArray)

如果需要精细控制虚线的线段长度和间隔,可使用lineStyle.dashArray属性,传入数字数组定义「线段长度、间隔长度」的循环模式:

option = {
  // ... 其他基础配置
  series: [
    {
      name: '自定义虚线',
      type: 'line',
      data: [/* 你的数据 */],
      lineStyle: {
        dashArray: [10, 5] // 10px线段 + 5px间隔,循环重复
      }
    }
  ]
};

数组元素数量支持1(线段与间隔长度相同)、2(线段+间隔)或更多(按顺序循环),比如[8, 4, 2, 4]会生成「长线段-短间隔-短线段-短间隔」的复杂虚线样式。

实现目标效果

针对你需要的「部分系列虚线、其余系列实线」的效果,只需给目标系列单独配置lineStyle.type或dashArray,其他系列保持默认实线即可。

内容的提问来源于stack exchange,提问作者Strike

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.14 18:05:01