常见效果
标记：
- markPoint：最大值、最小值
- markLine：平均值
- markArea：标注区间
markPoint：最大值、最小值
series:[
{
type:'line',
data:yData,
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
}
}
]
markLine：平均值
markLine:{
data:[
{
type:'average'
}
]
}
markArea：标注区间
markArea:{
data:[
[
{xAxis:"1月"},
{xAxis:'2月'}
],
[
{xAxis:'7月'},
{xAxis:'8月'}
]
]
}
线条控制
平滑线条 smooth
series:[
{
type:'line',
data:yData,
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
},
markLine:{
data:[
{
type:'average'
}
]
},
markArea:{
data:[
[
{xAxis:"1月"},
{xAxis:'2月'}
],
[
{xAxis:'7月'},
{xAxis:'8月'}
]
]
},
smooth:true,
}
]
线条样式 lineStyle
series:[
.......
lineStyle:{
color:'red'
}
]
lineStyle:{
color:'red',
type:'dashed'
}
lineStyle:{
color:'red',
type:'dotted'
}
填充风格
填充风格 areaStyle
areaStyle:{
color:'blue'
}
紧挨边缘 boundaryGap
boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始
我们可以看见此时的起点并不是从x轴的0点开始的
在xAxis中配置
xAxis:{
type:'category',
data:xData,
boundaryGap:false
},
我们可以看到此时从x轴0点开始
缩放, 脱离0值比例
如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况
此时如果我们的y轴数据为
var yData = [3001, 3002, 3003, 3004, 3002, 3001, 3001, 3001, 3003, 3002, 3003,3001]
此时由于数据相差不是很大，在直线图中就会这样显示
我们给yAxis设置属性
yAxis:{
type:'value',
scale:true
},
此时就会按照最小值开始
堆叠图
stack属性
堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上
相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:
我们在添加一组数据此时会发现，两个折线图会交叉
series:[
{
type:'line',
data:yData,
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
},
markLine:{
data:[
{
type:'average'
}
]
},
},
{
type:'line',
data:yData2,
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
},
markLine:{
data:[
{
type:'average'
}
]
}
}
]
使用了堆叠图之后:
series:[
{
type:'line',
data:yData,
stack: 'all', // series中的每一个对象配置相同的stack值, 这个all可以任意写
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
},
markLine:{
data:[
{
type:'average'
}
]
},
},
{
type:'line',
data:yData2,
stack: 'all', // series中的每一个对象配置相同的stack值, 这个all可以任意写
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
},
markLine:{
data:[
{
type:'average'
}
]
}
}
]
第二个图在第一图的基础上显示
此时我们在添加一个属性，会识堆叠的效果会更加明显
{
type:'line',
data:yData,
stack: 'all', // series中的每一个对象配置相同的stack值, 这个all可以任意写
areaStyle:{} ,
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
},
markLine:{
data:[
{
type:'average'
}
]
},
},
{
type:'line',
data:yData2,
stack: 'all', // series中的每一个对象配置相同的stack值, 这个all可以任意写
areaStyle:{} ,
markPoint:{
data:[
{
type:'max'
},
{
type:'min'
}
]
},
markLine:{
data:[
{
type:'average'
}
]
}
}