Echarts横向柱状图如何设置dataset数据集
时间: 2024-01-27 12:08:50 浏览: 86
在 Echarts 中,横向柱状图可以通过设置 dataset 数据集来实现。具体步骤如下:
1.在 option 中设置 dataset:
```
option = {
dataset: {
source: [
['product', '2015', '2016', '2017'],
['A', 43.3, 85.8, 93.7],
['B', 83.1, 73.4, 55.1],
['C', 86.4, 65.2, 82.5],
['D', 72.4, 53.9, 39.1]
]
},
...
}
```
以上代码中,`source` 数组中存储了数据,第一行为数据的标题,后面的行为数据。
2.在 series 中设置系列类型为 `bar`,并设置 `xAxisIndex` 和 `yAxisIndex`:
```
option = {
...
series: [
{
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0
}
]
}
```
以上代码中,`xAxisIndex` 和 `yAxisIndex` 分别表示横轴和纵轴的索引,由于是横向柱状图,因此横轴的索引为 0,纵轴的索引为 1。
3.在 xAxis 和 yAxis 中设置坐标轴类型为 `category` 和 `value`:
```
option = {
...
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
data: ['A', 'B', 'C', 'D']
}
]
}
```
以上代码中,`xAxis` 的类型为 `value`,表示横轴是数值轴;`yAxis` 的类型为 `category`,表示纵轴是类目轴,且设置了类目数据。
最终的代码如下:
```
option = {
dataset: {
source: [
['product', '2015', '2016', '2017'],
['A', 43.3, 85.8, 93.7],
['B', 83.1, 73.4, 55.1],
['C', 86.4, 65.2, 82.5],
['D', 72.4, 53.9, 39.1]
]
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
data: ['A', 'B', 'C', 'D']
}
],
series: [
{
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0
}
]
};
```
阅读全文