echarts_series总结，echarts-series总结，series总结

最新推荐文章于 2025-06-17 22:50:31 发布

南朝听月

最新推荐文章于 2025-06-17 22:50:31 发布

阅读量733

点赞数

CC 4.0 BY-SA版权

分类专栏： # 国际产品文章标签： echarts series总结 echarts-series

本文链接：https://blog.csdn.net/weixin_43131046/article/details/125101687

国际产品专栏收录该内容

11 篇文章

订阅专栏

本文探讨了使用ECharts绘制多系列折线图时遇到的问题，如何避免冗余配置，以及正确地组织数据结构以提高效率。作者分享了错误的配置尝试和正确实现方式，突显了ECharts在处理复杂数据结构时的局限性和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章很详尽

我用的是多系列折线图，因为数据都是去遍历组装的就想着能不能写成这种形式，这样就可以专注数据而不是对每一项都进行多余的配置了，发现是不可以的。还必须去繁琐，echarts的不足之处吧，（也可能是自己的用法不对）。

错误的想法：

 series: {
          smooth: true, // 是否平滑
          type: 'line',
          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
          connectNulls: true, // 是否连接空数据
          data: [
            {
              name: '全部',
              data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 500]
            },
            {
              name: '浙A00560',
              data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
            },
            {
              name: '浙A00000',
              data: [150, 232, 201, 154, 190, 330, 410, 301, 154, 190, 330]
            },
            {
              name: '浙A00060',
              data: [320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134]
            }
          ]
        }

正确生效的写法：

series: [
          {
            name: '全部',
            smooth: true, // 是否平滑
            type: 'line',
            showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
            connectNulls: true, // 是否连接空数据
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 500]
          },
          {
            name: '浙A00560',
            smooth: true,
            type: 'line',
            showSymbol: false,
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
          },
          {
            name: '浙A00000',
            smooth: true,
            type: 'line',
            showSymbol: false,
            data: [150, 232, 201, 154, 190, 330, 410, 301, 154, 190, 330]
          },
          {
            name: '浙A00060',
            smooth: true,
            type: 'line',
            showSymbol: false,
            data: [320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134]
          }
        ]