const option = {
title: {
text: ''
},
grid: {
left: '5%',
top: '5%',
right: '0%',
bottom: '10%'
},
// 鼠标移动到数据上时坐标轴的提示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
left: 'left',
icon: 'roundRect' // 这个字段控制形状 类型包括 circle,rect
},
xAxis: [{
type: 'category',
// 坐标刻度
axisTick: {
show: true
},
// 坐标轴横线颜色
axisLine:{
lineStyle:{
color:'rgba(56, 191, 96, 0.2)'
}
},
axisLabel: {
color: '#666666',
},
boundaryGap: false,
data: this.time
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
// 删除超出正坐标线段
},
// 坐标轴横线颜色
axisLine:{
show: false
},
min: 0,
max: 100,
axisLabel: {
color: '#666666', //y坐标轴的字体颜色
formatter: '{value}'
},
splitLine: { // 坐标轴以外的横线颜色
show: false
}
}],
series: [{
name: '',
type: 'line',
stack: '总量',
// 去掉折线线条的点
symbol: "none",
smooth: true, // 是否平滑曲线显示
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(56, 191, 96, 0.08)',
},
{
offset: 1,
color: 'rgba(56, 191, 96, 0.08)',//#21202E
}])
}
},
itemStyle: {
normal: {
// 修改数据边界的线颜色
lineStyle: {
color: 'rgba(56, 191, 96, 0.5)' //改变折线颜色
}
}
},
data: this.num
}
]
}
echarts 折线区域图基本样式修改参数参考
内容版权声明:除非注明,否则皆为本站原创文章。