// 图表借用 https://www.isqqw.com/viewer?id=40836 展示覆盖区斜线阴影
var option = {
backgroundColor: '#ffffff',
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#15ecf4',
},
},
},
legend: {
data: ['工程完结率'],
textStyle: {
fontSize: 12,
color: '#858ba1',
},
top: '1%',
left: '50%',
},
grid: {
bottom: 50,
left: 70,
right: 50,
},
xAxis: {
axisLine: {
show: false,
lineStyle: {
color: '#000',
},
},
axisTick: {
show: true,
color: '#000'
},
axisLabel: {
show: true,
textStyle: {
//改变刻度字体样式
color: '#000',
},
},
data: ['2019', '2020', '2021', '2022', '2023'],
},
yAxis: {
max: 100,
splitNumber: 4,
interval: 20,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: '#E2E2E5FF',
},
},
type: 'value',
axisLabel: {
formatter: '{value} %',
},
},
aria: {
enabled: true,
decal: {
show: true,
decals: [
{
color: "#0092f6",
backgroundColor: '#ffffff',
dashArrayX: [1, 0],
dashArrayY: [4, 10],
rotation: -Math.PI / 4
},
]
}
},
series: [
{
name: '工程完结率',
type: 'line',
// smooth: true, // 设置拆线平滑
symbol: 'circle',
symbolSize: 10,
itemStyle: {
normal: {
label: {
color: '#0092f6',
show: true, // 在折线拐点上显示数据
formatter: function (params) { //标签内容
return params.value + '%'
}
},
color: '#0092f6',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(0,146,246,0.5)'
}, {
offset: 1,
color: 'rgba(0,146,246,0.5)'
}]),
}
},
},
data: [98, 100, 99, 100, 80],
},
],
};