如何用echarts搭建天气图表
业务：显示7天内的天气预报，如果是当天的温度，要显示不同的图标
1.新建div绑定id，设置dom的宽高
<div id="main" style="width: 100%; height: 260px;border: 0px solid red;"></div>
2.设置好七天的数据，正式项目的时候是后台传过来的，目前只是测试数据
demoData : [
{
"rq": "2024-11-04",
"weatherZgwd": 15,
"weatherZdwd": -1,
"weatherTqDay": "晴",
"weatherTqNight": "晴",
"weatherImgDay": "https://d.scggqx.com/forecast/img/小雨.png",
"weatherImgNight": "https://d.scggqx.com/forecast/img/小雨.png",
"windDirectDay": "南风",
"windDirectNight": "南风",
"windPowerDay": "微风",
"windPowerNight": "微风",
"week": "星期一"
},
{
"rq": "2024-11-05",
"weatherZgwd": 18,
"weatherZdwd": 0,
"weatherTqDay": "晴",
"weatherTqNight": "晴",
"weatherImgDay": "https://d.scggqx.com/forecast/img/小雨.png",
"weatherImgNight": "https://d.scggqx.com/forecast/img/小雨.png",
"windDirectDay": "南风",
"windDirectNight": "南风",
"windPowerDay": "微风",
"windPowerNight": "微风",
"week": "星期二"
},
{
"rq": "2024-11-06",
"weatherZgwd": 16,
"weatherZdwd": 2,
"weatherTqDay": "晴",
"weatherTqNight": "多云",
"weatherImgDay": "https://d.scggqx.com/forecast/img/小雨.png",
"weatherImgNight": "https://d.scggqx.com/forecast/img/小雨.png",
"windDirectDay": "西南风",
"windDirectNight": "北风",
"windPowerDay": "微风",
"windPowerNight": "微风",
"week": "星期三"
},
{
"rq": "2024-11-07",
"weatherZgwd": 19,
"weatherZdwd": 4,
"weatherTqDay": "多云",
"weatherTqNight": "雷阵雨",
"weatherImgDay": "https://d.scggqx.com/forecast/img/小雨.png",
"weatherImgNight": "https://d.scggqx.com/forecast/img/小雨.png",
"windDirectDay": "北风",
"windDirectNight": "南风",
"windPowerDay": "3~4级",
"windPowerNight": "3~4级",
"week": "星期四"
},
{
"rq": "2024-11-08",
"weatherZgwd": 16,
"weatherZdwd": 4,
"weatherTqDay": "雷阵雨",
"weatherTqNight": "多云",
"weatherImgDay": "https://d.scggqx.com/forecast/img/多云.png",
"weatherImgNight": "https://d.scggqx.com/forecast/img/多云.png",
"windDirectDay": "北风",
"windDirectNight": "北风",
"windPowerDay": "3~4级",
"windPowerNight": "3~4级",
"week": "星期五"
},
{
"rq": "2024-11-09",
"weatherZgwd": 16,
"weatherZdwd": 2,
"weatherTqDay": "晴",
"weatherTqNight": "晴",
"weatherImgDay": "https://d.scggqx.com/forecast/img/阴.png",
"weatherImgNight": "https://d.scggqx.com/forecast/img/阴.png",
"windDirectDay": "北风",
"windDirectNight": "北风",
"windPowerDay": "3~4级",
"windPowerNight": "微风",
"week": "星期六"
},
{
"rq": "2024-11-10",
"weatherZgwd": 11,
"weatherZdwd": 0,
"weatherTqDay": "多云",
"weatherTqNight": "阴",
"weatherImgDay": "https://d.scggqx.com/forecast/img/小雨.png",
"weatherImgNight": "https://d.scggqx.com/forecast/img/小雨.png",
"windDirectDay": "无持续风向",
"windDirectNight": "无持续风向",
"windPowerDay": "微风",
"windPowerNight": "微风",
"week": "星期日"
}
],
3.在vue中定义数据
myChart: null,
weekday : [],
datelist : [],
weatherDaylist : [],
weatherNightlist : [],
weatherImgDaylist : [],
weatherImgNightlist : [],
windDirectlist : [],
windPowerlist : [],
weatherZgwdlist : [],
weatherZdwdlist : [],
weatherImgDaylistRich : {},
weatherImgNightlistRich : {},
maxWD : 30,
minWD : 0,
clickBarList : [],
3.创建init方法
①处理数据
this.demoData.forEach(item => {
this.weekday.push(item.week);
this.datelist.push(item.rq);
this.weatherDaylist.push(item.weatherTqDay);
this.weatherNightlist.push(item.weatherTqNight);
this.weatherImgDaylist.push(item.weatherImgDay);
this.weatherImgNightlist.push(item.weatherImgNight);
this.windDirectlist.push(item.windDirectDay);
this.windPowerlist.push(item.windPowerDay);
this.weatherZgwdlist.push(item.weatherZgwd);
this.weatherZdwdlist.push(item.weatherZdwd);
});
this.maxWD = Math.max(...this.weatherZgwdlist) + 20;
this.minWD = Math.min(...this.weatherZdwdlist) - 20;
let weatherImgDaylistStyle = this.weatherImgDaylist.map((item) => {
let dateUrl = item;
return {
backgroundColor: {
image: dateUrl
},
height: 20,
width: 20
}
});
let weatherImgNightlistStyle = this.weatherImgNightlist.map((item) => {
let dateUrl = item;
return {
backgroundColor: {
image: dateUrl
},
height: 20,
width: 20
}
});
let clickBarList = [];
weatherImgDaylistStyle.forEach((i, index) => {
this.weatherImgDaylistRich[index] = i;
clickBarList.push(this.maxWD);
});
weatherImgNightlistStyle.forEach((i, index) => {
this.weatherImgNightlistRich[index] = i;
});
③JS Date（日期）对象 getDay()获取星期
weekDay(){
var date = new Date()
date = date.getDay()
switch(date){
case 0:
date='星期日';
break;
case 1 :
date = "星期一";
break;
case 2 :
date = "星期二";
break;
case 3 :
date = "星期三";
break;
case 4 :
date = "星期四";
break;
case 5 :
date = "星期五";
break;
case 6 :
date = "星期六";
break;
}
return date;
},
④定义option
//销毁
if(this.myChart){
this.myChart.dispose();
}
this.myChart = echarts.init(document.getElementById('main'));
let weakday = this.weekDay()
var option;
option ={
title: {
text: '七日天气',
show: false,
},
legend: {
show: false
},
grid: {
show: true,
backgroundColor: "transparent",
opacity: 0.3,
borderWidth: "0",
top: "26%",
bottom: "26%"
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
z: 0, // 层级（权重）
triggerOn: 'click',
lineStyle: {
type: 'solid', // 将虚线改为实线
width: 80, // 设置背景的宽度
cap: 'square',
opacity: 1,
color: 'rgba(255,255,255,0.05)', // 设置背景颜色为白色
shadowBlur: 10, // 阴影模糊度
shadowColor: 'rgba(0, 0, 0, 0.1)', // 阴影颜色
shadowOffsetX: 0, // 水平方向阴影偏移距离
shadowOffsetY: 0
}
},
formatter: function (params) {
var res = params[0].name; // 获取x轴的名称
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' °C'; // 添加单位
}
return res;
}
},
xAxis: [
{
type: "category",
boundaryGap: false,
position: "top",
offset: 10,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: ["{a|{value}}"].join("\n"),
rich: {
a: {
color: 'white',
fontSize: 16
}
}
},
nameTextStyle: {},
data: this.weekday,
splitLine:{
show: true,
lineStyle:{
color: 'rgba(255, 255, 255, 0.1)',
}
}
},
{
type: "category",
position: "bottom",
offset: 10,
boundaryGap: false,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: ["{a|{value}}"].join("\n"),
rich: {
a: {
color: 'white',
fontSize: 16
}
}
},
nameTextStyle: {
fontWeight: "bold",
fontSize: 19
},
data: this.weatherNightlist,
axisPointer: {
show: false
},
splitLine:{
show: false,
lineStyle:{
color: 'rgba(255, 255, 255, 0.1)',
}
}
},
],
yAxis: {
show: false,
interval: 15,
type: "value",
axisLabel: {
formatter: "{value}" + "℃"
},
max: this.maxWD,
min: this.minWD
},
aria: {
enabled: true,
decal: {
show: true
}
},
series: [
{
name: "最高温度",
type: "line",
data: this.weatherZgwdlist,
symbol: (value, params) => {
if(params.name == weakday){
return `image://${symbolImgA}`
}else{
return `image://${symbolImgB}`
}
},
symbolSize: 20,
showSymbol: true,
smooth: true,
itemStyle: {
color: 'rgba(255,255,255,0.1)', // 设置圆形的填充色
},
lineStyle: {
width: 1, // 设置折线的宽度
color: 'rgba(119, 186, 236,1)' // 设置折线的颜色
},
silent: false,
label: {
show: true, // 显示数值
position: 'top',
color: 'white',
fontSize:16,
formatter: "{c}" + "℃"
}
},
{
name: "最低温度",
type: "line",
data: this.weatherZdwdlist,
symbol: (value, params) => {
if(params.name == weakday){
return `image://${symbolImgA}`
}else{
return `image://${symbolImgB}`
}
},
symbolSize: 20,
showSymbol: true,
smooth: true,
itemStyle: {
color: 'rgba(255, 255, 255,0.1)', // 设置圆形的填充色
},
lineStyle: {
width: 1, // 设置折线的宽度
color: 'rgba(119, 186, 236,1)' // 设置折线的颜色
},
silent: false,
label: {
show: true, // 显示数值
position: 'bottom',
color: 'white',
fontSize:16,
formatter: "{c}" + "℃"
}
},
]
};
this.myChart.setOption(option);
🌟 关于我 🌟
你好呀，感谢一直陪伴在这里的你！我是程序媛‘小帅哥’。在这里，我致力于分享前端领域的知识点，希望能为你的工作与生活带来一丝灵感与帮助。
💼 服务承接 💼
如果你也喜欢我的内容，或者正在寻找前端或者后端方面的帮助，那么请不要犹豫，联系我吧！我都愿意倾听你的想法，共同探索更多可能。
欢迎关注微信公众号：自学PS转前端
