展示图如下：
关键代码：
option = {
title: {
text: '温度和湿度变化'
},
tooltip: {
trigger: 'axis', // 触发类型，默认数据项触发，可选为：'item' | 'axis' | 'none'
// 你可以在这里配置更多的 tooltip 属性，比如：
// formatter: function (params) { ... } // 自定义内容格式器
// position: function (pos, params, dom, rect, size) { ... } // 自定义 tooltip 显示位置
backgroundColor: 'rgba(50,50,50,0.7)', // 提示背景颜色
borderColor: '#333', // 提示边框颜色
textStyle: {
color: '#fff', // 提示文字颜色
fontSize: 16
}
},
legend: {
data: ['温度', '湿度']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时']
},
yAxis: [
{
name: '温度',
type: 'value',
min: 23,
max: 25
},
{
name: '湿度',
type: 'value',
min: 39,
max: 41
}
],
series: [
{
name: '温度',
type: 'line',
data: [24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36, 24.36],
itemStyle: {
color: '#FFA94C'
},
areaStyle: {//区域样式
origin: "start",//向最小值方向渐变，y轴有负值要写
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FFA94C",
},
{
offset: 1,
color: "#fff",
},
]),
},
markPoint:{
label:{
normal:{
textStyle:{
color:'#fff'
}
}
},
data:[
{type:'min',name:'最小值'}
]
}
},
{
name: '湿度',
type: 'line',
yAxisIndex: 1,
data: [40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06, 40.06],
itemStyle: {
color: '#409EFF'
},
areaStyle: {//区域样式
origin: "start",//向最小值方向渐变，y轴有负值要写
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(64,158,255, 1)",
},
{
offset: 1,
color: "#fff",
},
]),
},
markPoint:{
label:{
normal:{
textStyle:{
color:'#fff'
}
}
},
data:[
{type:'min',name:'最小值'}
]
}
}
]
};
markPoint部分为气泡设置部分 希望能帮到你哦~
