配置项如下
let XData = ['12', '13', '14', '15', '16','17','18日']
let valueData = {
data1: [64,159,112,86,151,131,118],
data2: [124,30,77,97,67,75,70]
}
option = {
tooltip: {
trigger: 'axis'
},
legend: {
color: ["#F58080", "#47D8BE", "#F9A589"],
right: '2%',
top: '2%'
},
grid: {
top: 'middle',
left: '3%',
right: '4%',
bottom: '3%',
height: '80%',
containLabel: true
},
xAxis: {
type: 'category',
data: XData,
axisLine: {
lineStyle: {
color: 'rgba(193, 207, 220, 1)',
}
},
axisLabel: {
textStyle: {
color: "rgba(0, 0, 0, 1)"
}
},
},
yAxis: [{
type: 'value',
axisLabel: {
textStyle: {
color: "rgba(0, 0, 0, 1)"
}} ,
axisLine: {
show: false,
lineStyle: {
color: '#cdd5e2'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(193, 207, 220, 1)',
}
},
}
],
series: [{
name: '新增',
type: 'line',
data: valueData.data1,
color: "rgba(112, 119, 242, 1)",
symbol: "circle", //标记的图形为实心圆
symbolSize: 9, //标记的大小
lineStyle: {
normal: {
width: 2,
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: 'rgba(112, 119, 242, 1)' // 0% 处的颜色
}, {
offset: 0.4,
color: 'rgba(112, 119, 242, 1)' // 100% 处的颜色
}, {
offset: 1,
color: 'rgba(112, 119, 242, 1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(112, 119, 242, 0.5)',
shadowBlur: 10,
shadowOffsetY: 7
}
},
itemStyle: {
normal: {
color: 'rgba(112, 119, 242, 1)',
}
},
emphasis: {
// 鼠标hover上去的时候,拐点的颜色和样式
itemStyle: {
color: 'rgba(129, 135, 244, 1)', //颜色
borderColor: '#fff', //图形的描边颜色
borderWidth: 2, // 描边的线宽
shadowBlur: 4, // 图形的阴影大小
shadowColor: 'rgba(129, 135, 244, 1)', // 图形的阴影颜色
},
},
smooth: false
},
{
name: '注销',
type: 'line',
data: valueData.data2,
symbol: "circle", //标记的图形为实心圆
symbolSize: 9, //标记的大小
lineStyle: {
normal: {
width: 2,
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: 'rgba(242, 121, 36, 1)' // 0% 处的颜色
},
{
offset: 0.4,
color: 'rgba(242, 121, 36, 1)' // 100% 处的颜色
}, {
offset: 1,
color: 'rgba(242, 121, 36, 1)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(242, 121, 36, 0.5)',
shadowBlur: 10,
shadowOffsetY: 7
}
},
itemStyle: {
normal: {
color: 'rgba(242, 121, 36, 1)',
}
},
emphasis: {
// 鼠标hover上去的时候,拐点的颜色和样式
itemStyle: {
color: 'rgba(242, 121, 36, 1)', //颜色
borderColor: '#fff', //图形的描边颜色
borderWidth: 2, // 描边的线宽
shadowBlur: 4, // 图形的阴影大小
shadowColor: 'rgba(242, 121, 36, 1)', // 图形的阴影颜色
},
},
smooth: false
}
]
};