echarts横向柱状图怎么竖着
时间: 2023-09-12 12:10:17 浏览: 137
要将 Echarts 横向柱状图转换为竖向柱状图,可以通过修改 Echarts 的图表配置项来实现。具体步骤如下:
1. 将 Echarts 的 x 轴和 y 轴互换,即将原先的 x 轴配置项改为 y 轴,将 y 轴配置项改为 x 轴。
2. 修改柱状图的布局方式,将原先的 `barCategoryGap` 改为 `barGap`,将原先的 `barGap` 改为 `barCategoryGap`。
3. 修改柱状图的宽度和高度,将原先的 `barWidth` 改为 `barHeight`,将原先的 `barHeight` 改为 `barWidth`。
4. 修改柱状图的方向,将原先的 `horizontal` 改为 `vertical`。
修改后的配置项示例:
```
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
series: [
{
type: 'bar',
barWidth: 20, // 改为 barHeight
barCategoryGap: '20%', // 改为 barGap
data: [10, 20, 30, 40],
label: {
show: true,
position: 'insideRight'
},
itemStyle: {
color: '#0080FF'
}
}
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// 修改柱状图的方向
// horizontal 改为 vertical
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
polar: {},
angleAxis: {},
radiusAxis: {}
};
```
阅读全文