E charts怎么展示数据的条形图
时间: 2023-07-14 14:12:44 浏览: 43
使用 ECharts 展示数据的条形图,可以按照以下步骤进行:
1. 引入 ECharts 库和主题:
```html
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入 ECharts 主题 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>
```
2. 准备一个具有宽高的 DOM 容器:
```html
<div id="bar-chart" style="width: 600px; height: 400px;"></div>
```
3. 使用 JavaScript 代码配置图表:
```javascript
// 初始化 ECharts 实例
var chart = echarts.init(document.getElementById('bar-chart'), 'macarons');
// 配置项和数据
var option = {
title: {
text: '某地区蔬菜产量',
subtext: '单位:吨'
},
tooltip: {},
legend: {
data:['产量']
},
xAxis: {
data: ["西红柿","黄瓜","茄子","白菜","芹菜"]
},
yAxis: {},
series: [{
name: '产量',
type: 'bar',
data: [30, 50, 40, 20, 10]
}]
};
// 使用配置项和数据渲染图表
chart.setOption(option);
```
上述代码中,`title`、`tooltip`、`legend`、`xAxis`、`yAxis` 和 `series` 分别对应图表的标题、提示框、图例、坐标轴、数据系列等配置项。其中,`xAxis.data` 表示 X 轴上的数据,`series.data` 表示 Y 轴上的数据。`type: 'bar'` 表示该系列数据展示为条形图。
最后,通过 `chart.setOption(option)` 将配置项和数据渲染到图表容器中即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![qvf](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)