echarts 配置项 series 中的data 多维度

原文出处: https://www.cnblogs.com/vali/p/7978165.html
//系列中的数据内容数组。数组项通常为具体的数据项。
//通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』。
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  ]
      ]
  }]
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Echarts,`series`的`data`数据对象的`value`字段是默认的数据数值属性名,如果需要将其改成其他名称,可以通过在`option`定义`visualMap`组件,或者在`series`的`encode`属性进行配置。 下面是两种方法的具体实现: - 方法一:通过`visualMap`组件进行配置 ```javascript option = { visualMap: { dimension: 1, // 指定用于映射的数据维度 seriesIndex: 0, // 指定映射到哪个系列的数据 text: ['高', '低'], // 显示的文本 inRange: { color: ['#e0ffff', '#006edd'] // 映射到的颜色范围 } }, series: [{ type: 'map', map: 'china', data: [ {name: '北京', val: 100}, {name: '上海', val: 50}, {name: '广州', val: 70}, {name: '深圳', val: 80}, {name: '重庆', val: 60}, {name: '天津', val: 90} ] }] } ``` 在上述代码,我们通过定义`visualMap`组件,指定了要映射的数据维度为`1`,也就是`data`每个对象的第二个属性,即`val`属性,这样就把`data`的`value`字段替换成了`val`字段。 - 方法二:通过`encode`属性进行配置 ```javascript option = { series: [{ type: 'map', map: 'china', encode: { value: 2 // 将数据第三个属性映射到数值上 }, data: [ {name: '北京', value: 100, other: 'abc'}, {name: '上海', value: 50, other: 'def'}, {name: '广州', value: 70, other: 'ghi'}, {name: '深圳', value: 80, other: 'jkl'}, {name: '重庆', value: 60, other: 'mno'}, {name: '天津', value: 90, other: 'pqr'} ] }] } ``` 在上述代码,我们通过在`series`的`encode`属性对`value`进行配置,将数据第三个属性(即`other`属性)映射到数值上,这样就把`data`的`value`字段替换成了`other`字段。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值