人口新增和流失echart双折线图
时间: 2024-06-13 22:02:53 浏览: 10
在ECharts中,创建一个展示人口新增和流失的双折线图,可以帮助你清晰地对比两个数据系列随时间的变化趋势。双折线图(Double Line Chart)适合用来显示两个数值序列之间的比较,例如人口增长和减少的情况。以下是制作这样一个图表的基本步骤:
1. 引入ECharts库:首先,在HTML文件中引入ECharts的JS文件。
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
```
2. 准备数据:为新增和流失人口准备两个时间序列的数据,数据格式应包含日期和对应的数值。
```javascript
const data = {
newPopulation: [1000, 2000, 2500, 2700, 2800],
lostPopulation: [500, 800, 1000, 900, 1200],
labels: ['年1', '年2', '年3', '年4', '年5'] // 日期标签
};
```
3. 初始化ECharts实例并设置图表配置:
```javascript
let chart = echarts.init(document.getElementById('chartContainer'));
// 设置图表配置
var option = {
title: {
text: '人口新增与流失折线图'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'line' }
},
xAxis: {
type: 'category',
data: data.labels,
boundaryGap: false, // 消除轴间空白
},
yAxis: {
type: 'value',
name: '人数(单位:人)'
},
series: [
{
name: '新增人口',
type: 'line',
data: data.newPopulation,
lineStyle: {
color: 'blue' // 折线颜色
}
},
{
name: '流失人口',
type: 'line',
data: data.lostPopulation,
lineStyle: {
color: 'red' // 折线颜色
}
}
]
};
```
4. 渲染图表:
```javascript
chart.setOption(option);
chart.resize(); // 图表大小可能随页面调整,所以需要resize方法
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)