echarts横柱状图怎么按数值大小降序排列,并在柱图右侧标数值
时间: 2023-08-11 14:25:15 浏览: 169
echarts 横着显示的柱状图
要按照数值大小降序排列横柱状图,可以使用 echarts 的 `dataset` 组件和 `series` 组件的 `type` 属性设置为 `'bar'` 来实现。
首先需要在 `dataset` 组件中设置数据,其中包括横坐标数据和纵坐标数据。然后在 `series` 组件中设置 `type` 属性为 `'bar'`,并在 `series` 组件中使用 `datasetIndex` 属性将数据和图表关联起来。最后,在 `yAxis` 组件中设置 `inverse` 属性为 `true`,可以将柱状图按照数值大小降序排列。
下面是一个示例代码,可以实现横柱状图按照数值大小降序排列,并在柱图右侧标数值:
```javascript
option = {
dataset: {
source: [
['product', '2016', '2017', '2018'],
['A', 50, 80, 90],
['B', 70, 60, 80],
['C', 80, 50, 70]
]
},
yAxis: {
type: 'category',
inverse: true
},
xAxis: {
type: 'value'
},
series: [{
type: 'bar',
encode: {
x: '2018',
y: 'product'
},
label: {
show: true,
position: 'right',
formatter: '{c}'
}
}]
};
```
在上面的代码中,数据源是一个二维数组,其中第一行是列名,后面的行是数据。在 `yAxis` 组件中设置 `type` 为 `'category'`,可以将第一列作为横轴。在 `xAxis` 组件中设置 `type` 为 `'value'`,可以将后面的列作为纵轴。在 `series` 组件中设置 `type` 为 `'bar'`,并使用 `encode` 属性将 `x` 轴和 `y` 轴与数据源中的列名对应起来。在 `label` 属性中设置 `show` 为 `true`,可以显示柱图右侧的数值标签,`position` 属性设置为 `'right'`,可以让数值标签显示在柱图的右侧,`formatter` 属性可以设置数值标签的格式。
更多 echarts 相关的问题,欢迎再次提问。
阅读全文