echarts图表学习之折线图
2022-01-20 本文已影响0人
似朝朝我心
将如下数据用折线图表示:
数据分析：
案例效果初步呈现：
案例基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="main" style="width: 1400px;height: 400px;">
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data(){
return {
xDataArr:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
yDataArr:[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600], //数学成绩
}
},
mounted() {
//初始化echarts实例
const myChart = echarts.init(document.getElementById('main'))
const option = {
xAxis:{ //X轴
type:'category', //类目名称
data: this.xDataArr
},
yAxis:{ //y轴
type:'value' //数值轴
},
series:[
{
name:'康师傅',
type:'line',
data: this.yDataArr
}
]
}
myChart.setOption(option) //指定的配置项和数据显示图表
}
})
</script>
</body>
</html>
标记折线图的最大值、最小值、平均值、标注区间
- 标记最大值与最小值：markPoint
- 标记平均值：markLine
- 标注区间：markArea
效果展示：
部分代码：
series: [{
name: '康师傅',
type: 'line',
data: this.yDataArr,
markPoint: { //标记点
data: [
//最大值
{
type: 'max'
},
//最小值
{
type: 'min'
}
]
},
markLine: { //标记线
data: [{
type: 'average' //平均线
}]
},
markArea: {
data: [
[{ //第一块区间开始值
xAxis: '一月'
},
{ //第一块区间结束值
xAxis: '二月'
}
],
[{ //第二块区间开始值
xAxis: '六月'
},
{ //第二块区间结束值
xAxis: '八月'
}
]
]
}
}, ]
开启线条控制：平滑、风格
- smooth： 让线条看起来平滑一点
- lineStyle： 调节线条的样式
代码位置：
效果：
左边为未开启smooth风格的折线图
线条样式：
效果：
区间填充风格
- areaStyle
代码位置：
效果：
紧挨Y轴边缘
- boundaryGap 控制线条边缘距离(true为默认值，false为没有距离)
正常折线图下，我们可以看到线条的起始点离y轴还有一小段的距离。
如果我们要让起始点贴近y轴，就需要使用boundaryGap: false
效果：
缩放：y轴脱离0值比例
-
scale
如下图所视，一般我们的折线图都是从0值开始。
但有些场合我们不希望从0开始算起，而是由我们的数据当中的最小值决定，这时候就需要我们的scale：true了。
可以看到y轴这里的500是由数据中定义的最小值决定的，而不是默认的从0起步。
堆叠图
- stack 避免2条折线出现相交的情况
一般的堆叠图如下：存在相交的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="main" style="width: 800px;height: 400px;">
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data() {
return {
xDataArr: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
yDataArr1: [3000, 1800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600], //数学成绩
yDataArr2: [2800, 900, 1800, 1200, 900, 700, 1400, 1600, 1900, 2000, 1700, 800],
}
},
mounted() {
//初始化echarts实例
const myChart = echarts.init(document.getElementById('main'))
const option = {
xAxis: { //X轴
type: 'category', //类目名称
data: this.xDataArr,
boundaryGap: false //紧挨边缘
},
yAxis: { //y轴
type: 'value' ,//数值轴
scale: true //缩放
},
series: [
{
name: '康师傅',
type: 'line',
data: this.yDataArr1,
lineStyle:{
color:'red'
}
},
{
name: '康师傅',
type: 'line',
data: this.yDataArr2,
},
]
}
myChart.setOption(option) //指定的配置项和数据显示图表
}
})
</script>
</body>
</html>
使用stack后，不会出现相交，蓝线就以红线为起点算。
填充区间
折线图特点
- 折线图通常用来分析数据随时间的变化趋势
