echarts 配置项 series 中的data 多维度

最新推荐文章于 2025-07-22 02:06:56 发布

转载最新推荐文章于 2025-07-22 02:06:56 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vali/p/7978165.html

文章标签：

#javascript #数据结构与算法 #ViewUI

本文详细介绍了Echarts在series中的data配置项如何处理多维度数据，通过实例解析了如何将复杂的数据结构映射到图表上，适用于JavaScript开发者理解和应用。

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

//系列中的数据内容数组。数组项通常为具体的数据项。
//通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。
series: [{
    data: [
        // 维度X   维度Y   其他维度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

//在 直角坐标系 (grid) 中『维度X』和『维度Y』会默认对应于 xAxis 和 yAxis。
在 极坐标系 (polar) 中『维度X』和『维度Y』会默认对应于 radiusAxis 和 angleAxis。

//后面的其他维度是可选的，可以在别处被使用，例如：
//在 visualMap 中可以将一个或多个维度映射到颜色，大小等多个图形属性上。
//在 series.symbolSize 中可以使用回调函数，基于某个维度得到 symbolSize 值。
//使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他维度的值展示出来。
//特别地，当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示。例如：
xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 与 xAxis.data 一一对应。
    data: [23,  44,  55,  19]
    // 它其实是下面这种形式的简化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

特别地，当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示。

『值』与 轴类型 的关系：
//当某维度对应于数值轴（axis.type 为 'value' 或者 'log'）的时候：
//其值可以为 number（例如 12）。（也可以兼容 string 形式的 //number，例如 '12'）
//当某维度对应于类目轴（axis.type 为 'category'）的时候：
//其值须为类目的『序数』（从 0 开始）或者类目的『字符串值』。例如：
  xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四']
  },
  yAxis: {
      type: 'category',
      data: ['a', 'b', 'm', 'n', 'p', 'q']
  },
  series: [{
      data: [
          // xAxis    yAxis
          [  0,        0,    2  ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2,    1  ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p',   2  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3,    5  ]
      ]
  }]