如上图,可以切换温度,降水量,风力风向和空气质量
javascript
<template>
<el-radio-group v-model="selectedData" @change="updateChart">
<el-radio-button label="temperature">温度</el-radio-button>
<el-radio-button label="precipitation">降水量</el-radio-button>
<el-radio-button label="wind">风力风向</el-radio-button>
<el-radio-button label="airQuality">空气质量</el-radio-button>
</el-radio-group>
<div id="temp3day"></div>
</template>
<script setup>
import * as echarts from "echarts";
const props = defineProps({
echartList: {
default: [
{ temp: 47, date: '2023-01-01' },
{ temp: 44, date: '2023-01-02' },
{ temp: 41, date: '2023-01-03' },
{ temp: 38, date: '2023-01-04' },
{ temp: 35, date: '2023-01-05' },
{ temp: 32, date: '2023-01-06' },
{ temp: 29, date: '2023-01-07' },
],
},
});
const selectedData = ref('temperature');
const temperatureData = ref(['12.3', '15.5', '12.7', '13.9', '13.1', '12.3', '13.5'])
const precipitationData = ref(['12','19','0','1','22','0','0'])
const windData = ref([])
const airQualityData = ref([])
const initNet = async () => {
// const res2 = await proxy.$get("/oneNetwork/getSourceInfo", {
// netId: props.netWorkId,
// }); //热源
initChart('温度 (°C)', temperatureData.value)
};
const initChart = (yAxisName, seriesData) => {
let timeData = ['现在', '12:30', '15:00', '18:00', '21:00', '24:00', '27:00'];
const machart = echarts.init(document.getElementById("temp3day"));
var option = {
title: {
text: "",
},
tooltip: {
trigger: "axis",
},
grid: {
left: "3%",
right: "3%",
bottom: "12%",
top: "17%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: timeData,
},
yAxis: [{
type: "value",
// name: '负荷 (MW)',
position: 'left',
// axisLabel: {
// formatter: '{value} MW'
// }
axisTick: {
show: false // 隐藏刻度线
},
splitLine: {
show: false // 隐藏网格线
}
}],
series: [
{
name: yAxisName,
type: "line",
stack: 'Total',
areaStyle: {
// 添加渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#B0C4DE' }, // 上方颜色
{ offset: 1, color: '#F0F8FF' } // 下方颜色
],
global: false // 缺省为 false
}
},
emphasis: {
focus: 'series'
},
lineStyle: {
color: '#B0C4DE' // 折线颜色设置为蓝灰色
},
data: seriesData,
},
],
};
machart.setOption(option);
};
const updateChart = () => {
let yAxisName = '';
let seriesData = [];
switch (selectedData.value) {
case 'temperature':
yAxisName = '温度 (°C)';
seriesData = temperatureData.value;
break;
case 'precipitation':
yAxisName = '降水量 (mm)';
seriesData = precipitationData.value;
break;
case 'wind':
yAxisName = '风速 (m/s)';
seriesData = windData.value;
break;
case 'airQuality':
yAxisName = '空气质量指数';
seriesData = airQualityData.value;
break;
default:
break;
}
initChart(yAxisName, seriesData)
}
setTimeout(() => {
initNet()
}, 800);
</script>
<style scoped>
#temp3day {
width: 100%;
height: 32vh;
}
</style>