echarts柱状图横向
时间: 2023-08-06 11:08:10 浏览: 150
echarts 横着显示的柱状图
要创建一个横向的柱状图,你可以使用 ECharts 提供的 Bar 图表类型,并将 xAxis 和 yAxis 的配置进行对调。以下是一个简单的示例代码:
```javascript
// 引入 ECharts
import echarts from 'echarts';
// 创建图表实例
const myChart = echarts.init(document.getElementById('chart'));
// 配置图表
const option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['数据1', '数据2', '数据3', '数据4']
},
series: [{
type: 'bar',
data: [10, 20, 30, 40]
}]
};
// 渲染图表
myChart.setOption(option);
```
在上面的示例中,xAxis 的类型设置为 'value',yAxis 的类型设置为 'category',并且将数据放在 yAxis 中。series 中的 type 设置为 'bar',data 数组中的值表示每个柱子的高度。
请注意,以上示例只是一个简单的示例,你可以根据自己的需求进行更多的配置和样式调整。同时,你需要确保已经引入了 ECharts 库,并在页面中有一个具有唯一 id 的容器用于渲染图表(例如 `<div id="chart"></div>`)。
阅读全文