echarts数据可视化——绘制三个城市空气质量数据
时间: 2024-09-13 22:12:13 浏览: 56
ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以在网页中创建各种图表。绘制三个城市空气质量数据的步骤大致如下:
1. 引入 ECharts 库:在 HTML 文件中通过 `<script>` 标签引入 ECharts 库文件。
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
```
2. 准备数据:定义三个城市的空气质量数据,例如 PM2.5、PM10、SO2 等指标的数值。
```javascript
var cityData = [
{
name: '城市A',
value: [120, 150, 200]
},
{
name: '城市B',
value: [140, 180, 190]
},
{
name: '城市C',
value: [130, 210, 220]
}
];
```
3. 准备 ECharts 实例:在 HTML 中定义一个 `div` 容器,并在 JavaScript 中初始化 ECharts 实例。
```javascript
var myChart = echarts.init(document.getElementById('main'));
```
4. 配置 ECharts 选项:配置图表的标题、系列类型、数据等。
```javascript
var option = {
title: {
text: '空气质量对比'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['PM2.5', 'PM10', 'SO2']
},
yAxis: {
type: 'value'
},
series: [
{
name: '城市A',
type: 'bar',
data: cityData[0].value,
emphasis: {
focus: 'series'
}
},
{
name: '城市B',
type: 'bar',
data: cityData[1].value,
emphasis: {
focus: 'series'
}
},
{
name: '城市C',
type: 'bar',
data: cityData[2].value,
emphasis: {
focus: 'series'
}
}
]
};
```
5. 将配置项设置给 ECharts 实例并显示图表。
```javascript
myChart.setOption(option);
```
6. 完整的 HTML 示例代码:
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
// ...以上提到的 JavaScript 代码...
</script>
</body>
</html>
```
以上是使用 ECharts 绘制三个城市空气质量数据的基本步骤。实际应用中,你可能需要根据具体的数据结构和需求进行调整,例如添加图例、调整颜色、设置交互功能等。
阅读全文