echarts柱状图横向怎么设置
时间: 2023-11-15 16:58:53 浏览: 122
要设置echarts柱状图横向,需要在option中设置xAxis和yAxis的type属性。其中xAxis的type属性设置为'category',yAxis的type属性设置为'value'。同时,需要将series中的type属性设置为'bar',并将data属性中的数据按照横向排列。下面是一个示例代码:
```
import * as echarts from 'echarts';
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar', showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
```
注意,以上代码中的数据是竖向排列的,如果要将其改为横向排列,只需要将xAxis和yAxis的type属性互换即可。
阅读全文