先让我们看看实现后的效果吧
下面是源码还原,需要修改今天明天的更改week1的数组即可
<template>
<div class="boxd">
<div class="boxtop">
<span>整周监测实况</span>
<ul class="titbox">
<li ref="allin" class="active" @click="sxd()" style="cursor:pointer;">
温度(℃)
</li>
<li ref="jk" @click="yxl()" style="cursor:pointer;">相对湿度(%)</li>
<li ref="production" @click="sxj()" style="cursor:pointer;">降水量(mm/h)</li>
<li ref="direction" @click="flfx()" style="cursor:pointer;">
风力风向(m/s)
</li>
</ul>
</div>
<div id="myCharts" :style="{ width: '100%', height: '75%' }"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
dateform: [],
m2R2Data: [15, 18, 22, 24, 20, 21, 19]
};
},
watch: {
m2R2Data: function() {
this.drawLine();
}
},
mounted() {
this.timeLine();
this.drawLine();
},
methods: {
timeLine() {
function Double(n) {
if (n < 10) {
return "0" + n;
} else {
return n;
}
}
let myDate = new Date();
let month = myDate.getMonth() + 1;
let dates = myDate.getDate();
let week1 = ["今天 ", "明天 "];
let week = [
"星期日 ",
"星期一 ",
"星期二 ",
"星期三 ",
"星期四 ",
"星期五 ",
"星期六 "
];
myDate.setDate(myDate.getDate() + 0);
let dateArray = [];
let dateTemp;
let weekday;
for (let i = 0; i < 7; i++) {
dateTemp =
Double(myDate.getMonth() + 1) +
"月" +
Double(myDate.getDate()) +
"日";
weekday = i <= 1 ? week1[i] : week[myDate.getDay()];
dateArray.push(weekday + dateTemp);
myDate.setDate(myDate.getDate() + 1);
}
this.dateform = dateArray;
},
sxd() {
this.$refs.allin.style.borderBottom = "2px solid #009ef4";
this.$refs.jk.style.borderBottom = "#fff";
this.$refs.production.style.borderBottom = "#fff";
this.$refs.direction.style.borderBottom = "#fff";
this.m2R2Data = [15, 18, 22, 24, 20, 21, 19];
},
yxl() {
this.$refs.allin.style.borderBottom = "#fff";
this.$refs.jk.style.borderBottom ="2px solid #009ef4";
this.$refs.production.style.borderBottom = "#fff";
this.$refs.direction.style.borderBottom = "#fff";
this.m2R2Data = [68, 55, 48, 52, 58, 60, 62];
},
sxj() {
this.$refs.allin.style.borderBottom = "#fff";
this.$refs.jk.style.borderBottom = "#fff";
this.$refs.production.style.borderBottom = "2px solid #009ef4";
this.$refs.direction.style.borderBottom = "#fff";
this.m2R2Data = [250, 220, 233, 277, 265, 262, 272];
},
flfx() {
this.$refs.allin.style.borderBottom = "#fff";
this.$refs.jk.style.borderBottom = "#fff";
this.$refs.production.style.borderBottom = "#fff";
this.$refs.direction.style.borderBottom = "2px solid #009ef4";
this.m2R2Data = [4, 2, 3, 2, 5, 3, 2];
},
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myCharts"));
let _this = this;
let lineitemStyle = {
normal: {
label: {
formatter: function(params) {
return dataValue - params.value;
},
fontSize: 40,
padding: [90, 0, 0, 0],
color: "#fff",
textStyle: {
baseline: "top"
}
},
color: "#66ff00",
borderColor: "rgba(102, 255, 0, 0.5)",
borderWidth: 10
}
};
let dataItem = _this.m2R2Data;
myChart.setOption({
backgroundColor: "#fff",
grid: {
top: "25%",
bottom: "10%",
left: "5%",
right: "5%"
},
tooltip: {
trigger: "axis"
},
legend: {
show: false
},
xAxis: [
{
type: "category",
data: _this.dateform,
axisLabel: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: "#fff"
}
},
splitLine: {
show: false
}
},
{
type: "category",
data: _this.dateform,
axisLabel: {
show: true,
textStyle: {
color: "#333" //X轴文字颜色
},
formatter: function(params) {
return params.split(" ")[0] + "\n" + params.split(" ")[1];
}
},
axisLine: {
show: false,
lineStyle: {
color: "#fff"
}
},
splitLine: {
show: true,
lineStyle: {
color: "#ddd6d0"
},
interval: 0
}
}
],
yAxis: [
{
type: "value",
axisLabel: {
show: true,
textStyle: {
color: "#ebf8ac"
}
},
axisLine: {
lineStyle: {
color: "#FFFFFF"
}
}
},
{
type: "value",
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
}
],
series: [
{
name: "",
type: "line",
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 10, //标记的大小
itemStyle: lineitemStyle,
data: dataItem
}
]
});
window.onresize = myChart.resize;
}
}
};
</script>
<style lang="less" scoped>
.boxd {
height: 80%;
width: 100%;
padding: 0.625em;
float: left;
.boxtop {
width: 100%;
height: 15%;
background: #fff;
padding: 5px;
span {
width: 40%;
color: #333;
display: inline-block;
padding: 5px;
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
}
.titbox {
width: 60%;
float: right;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #333;
li {
float: left;
width: 25%;
text-align: center;
font-size: 14px;
margin: 5px;
}
.active {
border-bottom: 2px solid #009ef4;
}
}
}
}
</style>