echarts柱状图变条形图
时间: 2023-10-11 21:08:50 浏览: 214
Echarts考试分数柱状图代码
你可以使用ECharts的"bar"系列来创建柱状图,然后通过设置"horizontal"属性为true,将其转换为条形图。以下是具体的代码示例:
```javascript
// 导入ECharts
import * as echarts from 'echarts';
// 初始化echarts实例
var chart = echarts.init(document.getElementById('chart'));
// 定义柱状图数据
var data = [120, 200, 150, 80, 70];
// 配置柱状图选项
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [{
type: 'bar',
data: data,
// 设置为条形图
horizontal: true
}]
};
// 使用配置项生成图
chart.setOption(option);
```
这样就可以将ECharts柱状图转换为条形图。只需将"series"中的"type"属性设置为"bar",然后在该系列中添加一个"horizontal"属性并将其值设置为true即可。记得根据你的需求修改数据和其他配置项。
阅读全文