echarts 配置项 series 中的data 多维度

ECharts dataset 详解

简单概括一下就是
数据集(dataset)中除第一行元素外，每一行数据对应x轴一个类目，有多少个系列，类中就有多少图（或者说bar图里的多少根柱子）

一个系列等于数据集的一列，默认数据集第一列为类目列(category)

当系列个数大于数据集中数据行数时，会在每个类中增加系列(每个类目里增加图)，但是多余的系列的值等于dataset第二列的数据值。

//系列中的数据内容数组。数组项通常为具体的数据项。
//通常来说，数据用一个二维数组(arr[x][y])表示。如下，每一列被称为一个『维度』。
series: [{
data: [
// 维度X 维度Y 其他维度 ...
[ 3.4, 4.5, 15, 43], //arr[0][y]一行
[ 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 ]
]
}]

echarts 配置项 series 中的data 多维度相关推荐

echarts中series下的data循环拼接
页面效果 x轴为每年存在数据的月份,因而不一定是12个月,每个月又包含对应的天数 y轴为充电量获取数据 listCarChargingKWHChart() {var _this = this;lis ...
vue中给echarts的series,xAxis中的data动态赋值
循环this.dataAndScore获取到数据后,直接通过option赋值给echart const Xdata = []; //定义数组Xdata const Sdata = []; //定义数组 ...
echarts legend位置_一起读 ECharts 配置项手册之 series[i]-line（上）
之前的文章写得都比较杂,还总是想不到要写点什么-- 所以最近打算把 ECharts 所有系列挨个聊一遍,写一个 series 系列的简单介绍,解决一大段时间的难选题问题- -b,顺便方便比我还新的新手 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
echarts配置项图文介绍——xAxis
echarts配置项图文介绍--xAxis 本文仅用于个人学习笔记,文中出现错误或不恰当请在评论区指出.本文仅介绍稍有难度的配置项,极其简单易懂的配置项请自行移步官网查阅文档. 一.用途直角坐标系 ...
【ECharts】ECharts配置项详解
这是一个方便自己学习ECharts所编写的,如有遗漏和错误之处,欢迎各位指出文章部分转载于用户:法海521的博客"echarts各个配置项详细说明总结",地址:https://b ...
3D echarts在vue中的使用
大屏中有时候会用3D 的echarts,效果图如下首先在vue里面的使用,引入就不讲了 <echarts3DPieref="pei3D":DpieData="Dp ...
vue echarts div变化_数据可视化之echarts在Vue中的使用
数据可视化的本质是将数据通过各种视觉通道映射成图形,可以使得用户更快.更准确的理解数据. 一.为什么选择echarts: 简单上手容易满足绝大部分的开发需要在可视化库中有较好的体验和口碑二.在V ...

echarts 配置项 series 中的data 多维度

echarts 配置项 series 中的data 多维度相关推荐

最新文章

热门文章