下面是echarts的option:
option = {
backgroundColor: '#efefef',
title: [{
text: '个人曲线', //主标题
top: '15%',
left: '40%'
},
{
text: '榜样曲线', //主标题
top: '15%',
right: '18%'
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
legend: {
color: ['#A582EA', '#2CABE3'],
formatter(params) {
return params
},
x: '86%',
y: '20%',
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 12,
color: '#323233'
}
},
grid: {
top: '15%',
left: '10%',
right: '15%',
bottom: '15%',
// containLabel: true
},
xAxis: [{
type: 'category',
axisLine: {
show: true, // 坐标轴
color: '#A582EA',
symbol: ['none', 'arrow'], //显示箭头
symbolSize: [6, 6] //箭头长宽
},
axisLabel: {
color: '#A582EA',
width: 100
},
splitLine: {
show: false
},
boundaryGap: false, //两边留白策略
data: ["", "3月转正", "6月实战", "1年考核", "24月留存", "当前职级", "榜样职级"] //this.$moment(data.times).format("HH-mm") ,
}],
yAxis: [{
name: '能力值', //y轴名称
type: 'value',
nameTextStyle: {
fontSize: 10 //y轴名称大小设置
},
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: '#00BFF3',
opacity: 0.23
}
},
axisLine: {
show: true, // 坐标轴
symbol: ['none', 'arrow'], //显示箭头
symbolSize: [6, 6] //箭头长宽
},
position: 'left',
nameLocation: 'middle',
nameGap: 4,
nameRotate: 90,
axisLabel: {
show: true,
margin: 20,
textStyle: {
color: '#fff',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '工作态度',
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 10,
lineStyle: {
normal: {
color: "#A582EA",
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#A582EA',
}
},
itemStyle: {
color: "#fff",
borderColor: "#A582EA",
borderWidth: 2,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(43,193,145,0.3)'
},
{
offset: 1,
color: 'rgba(43,193,145,0)'
}
], false),
}
},
data: [0, 7, 5, 4, 3, 5, 8] //data.values
},
{
name: '学习能力',
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 10,
lineStyle: {
normal: {
color: "#2CABE3",
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#2CABE3',
}
},
itemStyle: {
color: "#fff",
borderColor: "#2CABE3",
borderWidth: 2,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(81,150,164,0.3)'
},
{
offset: 1,
color: 'rgba(81,150,164,0)'
}
], false),
}
},
data: [0, 5, 4, 2, 1, 7, 6], //data.values
markArea: {
data: [
[{
xAxis: '当前职级',
itemStyle: {
color: '#969799'
}
},
{
xAxis: '榜样职级',
itemStyle: {
color: '#969799'
}
}
]
]
}
},
]
};