echarts时间柱状图
时间: 2023-07-20 13:32:16 浏览: 89
好的,关于Echarts时间柱状图的制作,你可以参考以下步骤:
1. 在HTML文件中引入Echarts库和一个DOM容器,如下所示:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<div id="chart" style="width: 800px; height: 500px;"></div>
```
2. 编写JavaScript代码,配置图表的基本信息,如下所示:
```javascript
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '时间柱状图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['销量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [{
name: '销量',
type: 'bar',
barWidth: '60%',
data: [
[new Date('2020/01/01'), 100],
[new Date('2020/02/01'), 200],
[new Date('2020/03/01'), 300],
[new Date('2020/04/01'), 400],
[new Date('2020/05/01'), 500],
[new Date('2020/06/01'), 600]
]
}]
};
chart.setOption(option);
```
3. 最后,调用setOption方法将配置项应用到图表中。
这样,你就可以成功地制作一个基本的时间柱状图了。当然,你可以根据实际需要对图表进行进一步的美化和调整。
阅读全文