echarts柱状图只有两根柱子
时间: 2023-09-09 15:07:00 浏览: 104
echarts柱状图
如果你只想在 ECharts 中创建两根柱子的柱状图,你可以按照以下步骤进行操作:
1. 引入 ECharts 库:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
```
2. 创建一个容器用于显示图表:
```html
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
```
3. 初始化图表对象:
```javascript
var chart = echarts.init(document.getElementById('chartContainer'));
```
4. 设置图表的配置项:
```javascript
var option = {
xAxis: {
type: 'category',
data: ['类别1', '类别2'] // 柱子的类别,这里只有两个类别
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [100, 200] // 柱子的高度或长度,这里只有两个数据
}]
};
```
5. 将配置项应用到图表中并显示出来:
```javascript
chart.setOption(option);
```
在上述代码中,`xAxis` 的 `data` 属性设置为只有两个类别,即 ['类别1', '类别2'],`series` 中的 `data` 属性设置为只有两个数据,即 [100, 200]。
这样就创建了一个只有两根柱子的柱状图。你可以根据需要调整数据和样式来满足具体的要求。
阅读全文