使用echart 帮我画一个包含日期、横坐标和纵坐标的折线图,其中横坐标是预警数量,纵坐标是采集数量,
时间: 2024-03-21 20:41:33 浏览: 20
好的,我可以帮您使用 ECharts 画一个折线图。首先,你需要准备好数据,包含日期、预警数量和采集数量。假设你的数据格式如下:
```javascript
var data = [
{date: '2021-07-01', warningCount: 10, collectCount: 50},
{date: '2021-07-02', warningCount: 15, collectCount: 60},
{date: '2021-07-03', warningCount: 20, collectCount: 70},
{date: '2021-07-04', warningCount: 25, collectCount: 80},
{date: '2021-07-05', warningCount: 30, collectCount: 90},
];
```
接下来,你需要引入 ECharts 库和相关的主题。如果你还没有安装 ECharts,可以在命令行中输入以下命令来安装:
```shell
npm install echarts
```
然后,你需要在 HTML 文件中添加一个容器,用于显示图表:
```html
<div id="chart" style="width: 800px; height: 400px;"></div>
```
接下来,你可以使用以下代码来绘制折线图:
```javascript
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
// 设置主题
echarts.registerTheme('my_theme', {
color: ['#3398DB'],
});
// 配置选项
var option = {
title: {
text: '预警数量与采集数量',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
legend: {
data: ['预警数量', '采集数量'],
},
xAxis: {
type: 'value',
name: '预警数量',
},
yAxis: {
type: 'value',
name: '采集数量',
},
series: [
{
name: '预警数量',
type: 'line',
data: data.map(function (item) {
return [item.warningCount, item.collectCount];
}),
},
{
name: '采集数量',
type: 'line',
data: data.map(function (item) {
return [item.warningCount, item.collectCount];
}),
},
],
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
```
以上代码会生成一个包含日期、横坐标和纵坐标的折线图,其中横坐标是预警数量,纵坐标是采集数量。
相关推荐
![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)
![](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)