option = {
backgroundColor:'#0D2038',
color: ['#1890FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: '3%',
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
boundaryGap: false,
axisTick: {
show: false // 不显示坐标轴刻度线
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: 'rgba(230, 247, 255, 0.20)'
}
},
axisLine: {
lineStyle: {
color: '#ffffff'
},
},
//x底部文字
axisLabel: {
textStyle: {
padding: [10, 0, 0, 0],//表示 [上, 右, 下, 左] 的边距。
color: 'rgba(230, 247, 255, 0.50)',
fontSize: 16
}
}
}
],
yAxis: [
{
type: 'value',
//y右侧文字
axisLabel: {
textStyle: {
color: 'rgba(230, 247, 255, 0.50)',
fontSize: 16
}
},
// y轴的分割线
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(230, 247, 255, 0.20)',
}
}
}
],
series: [
{
name: '收入统计',
type: 'line',
smooth: false,
symbol: 'circle',//拐点设置为实心
symbolSize: 2,//拐点大小
itemStyle: {
normal: {
borderColor: 'rgba(42,157,255,.2)',//拐点边框颜色
borderWidth: 10,//拐点边框大小，
color: '#1890FF'
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
lineStyle: {
normal: {
width: 3,
shadowColor: "#1890FF",
shadowBlur: 20
}
},
areaStyle: {
opacity: 1,
//右下左上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(24, 144, 255, .5)'
},
{
offset: 0.3,
color: 'rgba(24, 144, 255, 0.2)'
},
{
offset: 1,
color: 'rgba(24, 144, 255, 0)'
}
])
},
data: [
{ value: 252 },
{ value: 307 },
{ value: 456 },
{ value: 578 },
{ value: 625 },
{ value: 455 },
{ value: 361 },
{ value: 525 },
{ value: 225 }
]
},
{
type: 'lines',
coordinateSystem: 'cartesian2d',
symbolSize: 8,
polyline: true, // 多线段
effect: {
show: true,
period: 5,
trailLength: 0.3,
symbolSize: 11,
symbol: 'circle',
color: '#0069d9',
},
lineStyle: {
normal: {
width: 1,
opacity: 0
},
// curveness: 0.5,
// join: 'round'
},
// 光点
data: [{
coords: [
['1月', 252],
['2月', 307],
['3月', 456],
['4月', 578],
['5月', 625],
['6月', 455],
['7月', 361],
['8月', 525],
['9月', 225]
]
}]
}
]
};