先看效果：
image
image.gif
代码实现如下：
option = {
backgroundColor: 'blue',
title: {
text: '', // 标题
left: 18,
top: 5,
textStyle: { color: 'rgba(255,255,255,.6)', fontSize: '29', align: 'right' }
},
// 弹出层样式
tooltip: {
trigger: 'axis',
borderColor: '#1f6485', // 边框颜色
backgroundColor: 'rgba(25,51,85,.8)',
borderWidth: 1,
textStyle: {
align: 'left'
},
formatter: (params) => {
const title = params[0].axisValue;
const data = params[0].data;
const ytitle = '降雨量';
return `${title}时
${ytitle}：${data}mm`;
}
},
xAxis: {
type: 'category',
name: '时',
nameTextStyle :{ // 设置单位样式
fontSize: 24
},
boundaryGap: true, // 坐标轴两边留白
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255,255,255,.6)', //更改坐标轴文字颜色
fontSize: 26 //更改坐标轴文字大小
}
},
axisLine: { // 坐标轴
lineStyle: {
color: '#ccc', // 坐标轴线颜色
width: 1 // 坐标轴线粗度
}
},
axisTick: { // 设置刻度相关
show: false // 不显示刻度
},
data: ['2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24']
},
yAxis: {
type: 'value',
name: '单位：mm',
max: 1, // 设置最大值
nameTextStyle :{ // 设置单位样式
fontSize: 24
},
splitLine: {
show: false, // 不显示网格线
lineStyle: {
// type: 'dashed', //默认实线，dashed虚线
width: 1,
color: '#0a2a5d'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255,255,255,.6)', //更改坐标轴文字颜色
fontSize: 26 //更改坐标轴文字大小
}
},
axisLine: { // 坐标轴
show: true,
lineStyle: {
color: '#ccc', // 坐标轴线颜色
width: 1 // 坐标轴线粗度
}
},
axisTick: { // 设置刻度相关
show: true,
inside: false, // 刻度是否朝内，默认朝外
length: 5 // 刻度长度，默认为5
}
},
series: [
{
data: [0.28, 0.4, 0.31, 0.37, 0.5, 0.3, 0.38, 0.25,0.4, 0.56, 0.6, 0.44],
type: 'line',
smooth: 0.2,
symbol: 'none',
areaStyle: {},
itemStyle: {
normal: {
areaStyle: {
type: 'default',
color: new echarts.graphic.LinearGradient( // 渐变色实现
0,
0,
0,
1,
[ // 三种由深及浅的颜色
{
offset: 0,
color: 'rgba(103, 210, 255, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0.1)'
}
]
)
},
lineStyle: { //线的颜色
color: '#00ffee'
}
}
}
}
]
};