echarts柱状图横过来后顺序排列反转了
时间: 2023-07-22 14:33:27 浏览: 1116
当 ECharts 的柱状图横向显示时,默认是按照数据从上到下的顺序展示的,而不是从左到右。如果您需要从左到右展示柱状图,可以通过设置 `xAxis` 的 `inverse` 属性为 `true` 来实现。
但是,由于横向柱状图的特殊性,当 `inverse` 属性设置为 `true` 时,柱子的顺序排列会反转。这是因为 `inverse` 属性实际上是控制坐标轴的显示方向,而不是柱子的顺序。因此,需要通过设置 `series` 中的 `sort` 属性来控制柱子的显示顺序。
例如,如果您希望在横向柱状图中,数据从左到右依次展示,可以按照以下方式设置 `sort` 属性:
```javascript
option = {
xAxis: {
type: 'value',
inverse: true, // 设置 inverse 属性为 true
},
yAxis: {
type: 'category',
data: ['数据1', '数据2', '数据3', '数据4', '数据5'],
},
series: [
{
name: '柱状图名称',
type: 'bar',
data: [20, 50, 80, 30, 70],
sort: 'ascending', // 设置 sort 属性为 'ascending',表示按照数据升序排列
},
],
};
```
在上述代码中,我们将 `xAxis` 的 `inverse` 属性设置为 `true`,表示横向显示柱状图。然后,将 `sort` 属性设置为 `ascending`,表示按照数据升序排列,从而实现了从左到右依次展示的效果。
如果您需要降序排列,将 `sort` 属性设置为 `descending` 即可。
阅读全文