如何在ECharts中创建一个基本的正负折线图?
时间: 2024-09-10 14:02:57 浏览: 38
EasyUI表格合并,及echarts折线图,导出折线图为图片
在ECharts中创建一个基本的正负折线图,你需要按照以下步骤进行:
1. 引入ECharts库:首先确保你的项目中已经引入了ECharts的JavaScript库。你可以通过CDN的方式引入或者下载到本地再引入。
2. 准备一个显示图表的容器:你需要在HTML中准备一个`div`元素,用来作为ECharts图表的容器。
3. 编写ECharts初始化代码:在你的JavaScript代码中,创建一个新的ECharts实例,并设置相关的配置项,以便绘制出正负折线图。
下面是一个简单的例子,展示如何创建一个正负折线图:
```javascript
// 基于准备好的容器(假设容器id为 'main'),初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '正负折线图示例'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['销量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: [120, -200, 340, -300, 220, -210, 250],
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
确保你的HTML中有一个id为"main"的`div`元素:
```html
<div id="main" style="width: 600px;height:400px;"></div>
```
运行上述代码后,你应该能看到一个基本的正负折线图。
阅读全文