样式截图大概如下：
1. x，y轴相关操作：xAxis，yAxis
(1) x，y轴的颜色：
axisLine: {
lineStyle: {
color: '#2898e5',
},
},
(2) x，y轴文字颜色：
axisLabel: {
show: true,
textStyle: {
color: '#019bf8'
}
}
（3）x，y轴刻度颜色：
axisTick: {
lineStyle: { color: '#2898e5' }
}
(4) x，y轴坐标文字太长显示不全：,倾斜rotate
axisLabel: {
show: true,
interval: 0,
rotate: 20
},
（5）x ,y 轴网格线的颜色：
splitLine: {
show: true,
lineStyle: {
color: ['rgb(1,155,246,0.3)'], //网格线
width: 1,
}
},
2. 折现 的样式
（1） 折现的平滑度series：
symbol: 'circle', //实心点
symbolSize: 6, //实心点的大小
smooth: true, //折现平滑
（2）折现的颜色：
itemStyle: {
normal: {
color: 'transparent'
}
},
（3）折现阴影变色：
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(52,214,145)' //渐变上边颜色
}, {
offset: 1,
color: 'transparent' //渐变下边颜色
}])
}
},
（4）折线上方显示文字：
label: {
normal: {
show: true,
position: 'top', //头上显示数据
color: 'rgb(0,255,255)' //显示文字颜色
}
},
3. grid图区域距离四周的距离：
在grid绘图网格里,containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示, 但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决;
grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true
},
4. 完整代码示例如下：
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['福州市', '无锡市', '兰州市', '合肥市', '广州市', '贵阳市', '长沙市'],
axisLine: {
lineStyle: {
color: '#2898e5', //轴颜色
},
},
axisLabel: {
interval: 0,
rotate: 40, //倾斜度
show: true,
textStyle: { //轴上文字
color: '#019bf8' //颜色
}
},
axisTick: {
lineStyle: { color: '#2898e5' }, // 刻度的颜色
},
},
grid: { //距离
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true //保留文字距离
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#2898e5', //轴
},
},
axisLabel: {
show: true,
textStyle: {
color: '#019bf8' //轴字体
}
},
splitLine: {
show: true,
lineStyle: {
color: ['rgb(1,155,246,0.3)'], //网格线颜色
width: 1,
}
},
axisTick: {
lineStyle: { color: '#2898e5' } // x轴刻度的颜色
}
},
series: [{
data: [1000, 920, 856, 601, 934, 1090, 802, 1000],
symbol: 'circle', //折线拐点实心圆
symbolSize: 6, //实心圆大小
smooth: true, //折线平滑
label: {
normal: {
show: true,
position: 'top', //折线上方显示数据
color: 'rgb(0,255,255)'
}
},
itemStyle: {
normal: {
color: 'rgb(0,255,255)' //折线颜色
}
},
areaStyle: { //阴影颜色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#019bf8' //渐变色上方颜色
}, {
offset: 1,
color: 'transparent' //渐变色下方颜色
}])
}
},
type: 'line'
}]
};