对echarts的一些总结
用过很久的echarts了,总结一下坑点和不熟悉的属性的用法。
1.先安装导入,这点不用强调了
2.一定要注意给宽高(不然图是不会出来的)
3.想要什么类型的,在官网上选好了,粘出来
4.改成你想要的数据和样式
常用的就不说了,说说我最近碰到的需求写的吧,不常用,所以写的时候查了一下,记下来。
1.去掉x轴轴线,刻度线,数字颜色改变
xAxis : [
{
type : 'category',
boundaryGap : false,
axisTick:{ //x轴刻度线
show:false
},
axisLine:{ //x轴
show:false,
lineStyle: {
color: "#777D94",
}
},
data : ['00:00','06:00','12:00','18:00','24:00']
}
],
2. y轴线,刻度线,网格状,颜色
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} '
},
axisTick:{ //y轴刻度线
show:false
},
splitLine: { //网格线
show: false
},
axisLine:{ //y轴
show:false,
lineStyle: {
color: "#777D94",
}
},
}
],
3.柱状图的距离,颜色
series : [
{
name:'今日',
type:'bar',
barGap: 0,
data:[2.0, 4.9, 7.0, 23.2],
itemStyle:{
normal:{
color:'#5172FA' //颜色
}
},
},
这个图
1.平滑
series : [
{
name:'昨日',
type:'line',
// symbol:'none', //这句就是去掉点的
smooth:true, //这句就是让曲线变平滑的
2. 渐变
series : [{
name:"今日"
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(81,114,250,0.1)'
},
// {
// offset: 0.2,
// color: 'rgba(81,114,250,0.1)'
// },
{
offset: 1,
color: 'rgba(81,114,250,0.01)'
}
], false)
}},
}]
3.设置层级
z:"2"