echarts中柱状图显示数据
时间: 2023-11-14 19:09:40 浏览: 82
echarts柱状图
要在echarts中显示柱状图,需要先准备好数据,然后在option中设置相应的配置项。以下是一个简单的示例代码:
```javascript
// 准备数据
var data = [5, 20, 36, 10, 10, 20];
// 设置option
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'bar'
}]
};
// 使用option初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);
```
其中,xAxis和yAxis分别表示x轴和y轴的配置,series表示数据系列的配置。在这个示例中,xAxis的type为'category',表示x轴上的数据是离散的,data属性是一个数组,包含了x轴上的所有数据。yAxis的type为'value',表示y轴上的数据是连续的。series中的type为'bar',表示这是一个柱状图。
阅读全文