|
@@ -0,0 +1,482 @@
|
|
|
+<template>
|
|
|
+ <div ref="chartDom" class="chart"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref, watch } from "vue";
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
+// const props = defineProps({
|
|
|
+// list: {
|
|
|
+// type: Array,
|
|
|
+// default: () => [],
|
|
|
+// required: true,
|
|
|
+// },
|
|
|
+// });
|
|
|
+
|
|
|
+let demoData = [
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "08/28",
|
|
|
+ weatherZgwd: 30,
|
|
|
+ weatherZdwd: 18,
|
|
|
+ weatherTqDay: "晴",
|
|
|
+ weatherTqNight: "晴",
|
|
|
+ weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ windDirectDay: "南风",
|
|
|
+ windDirectNight: "南风",
|
|
|
+ windPowerDay: "微风",
|
|
|
+ windPowerNight: "微风",
|
|
|
+ week: "星期三",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "08/29",
|
|
|
+ weatherZgwd: 31,
|
|
|
+ weatherZdwd: 19,
|
|
|
+ weatherTqDay: "晴",
|
|
|
+ weatherTqNight: "晴",
|
|
|
+ weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ windDirectDay: "南风",
|
|
|
+ windDirectNight: "南风",
|
|
|
+ windPowerDay: "微风",
|
|
|
+ windPowerNight: "微风",
|
|
|
+ week: "星期四",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "08/30",
|
|
|
+ weatherZgwd: 30,
|
|
|
+ weatherZdwd: 19,
|
|
|
+ weatherTqDay: "晴",
|
|
|
+ weatherTqNight: "多云",
|
|
|
+ weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ windDirectDay: "西南风",
|
|
|
+ windDirectNight: "北风",
|
|
|
+ windPowerDay: "微风",
|
|
|
+ windPowerNight: "微风",
|
|
|
+ week: "星期五",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "08/31",
|
|
|
+ weatherZgwd: 30,
|
|
|
+ weatherZdwd: 21,
|
|
|
+ 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: "星期六",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "09/01",
|
|
|
+ weatherZgwd: 25,
|
|
|
+ weatherZdwd: 16,
|
|
|
+ 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: "星期日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "09/02",
|
|
|
+ weatherZgwd: 26,
|
|
|
+ weatherZdwd: 15,
|
|
|
+ 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: "星期一",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "09/03",
|
|
|
+ weatherZgwd: 27,
|
|
|
+ weatherZdwd: 18,
|
|
|
+ weatherTqDay: "多云",
|
|
|
+ weatherTqNight: "阴",
|
|
|
+ weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ windDirectDay: "无持续风向",
|
|
|
+ windDirectNight: "无持续风向",
|
|
|
+ windPowerDay: "微风",
|
|
|
+ windPowerNight: "微风",
|
|
|
+ week: "星期二",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sourceof: null,
|
|
|
+ create_by: null,
|
|
|
+ update_by: null,
|
|
|
+ remark: null,
|
|
|
+ sys_dept_code: null,
|
|
|
+ createTime: null,
|
|
|
+ updateTime: null,
|
|
|
+ rq: "09/04",
|
|
|
+ weatherZgwd: 27,
|
|
|
+ weatherZdwd: 18,
|
|
|
+ weatherTqDay: "多云",
|
|
|
+ weatherTqNight: "阴",
|
|
|
+ weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
|
|
|
+ windDirectDay: "无持续风向",
|
|
|
+ windDirectNight: "无持续风向",
|
|
|
+ windPowerDay: "微风",
|
|
|
+ windPowerNight: "微风",
|
|
|
+ week: "星期二",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+let weekday = [];
|
|
|
+let datelist = [];
|
|
|
+let weatherDaylist = [];
|
|
|
+let weatherNightlist = [];
|
|
|
+let weatherImgDaylist = [];
|
|
|
+let weatherImgNightlist = [];
|
|
|
+let windDirectlist = [];
|
|
|
+let windPowerlist = [];
|
|
|
+let weatherZgwdlist = [];
|
|
|
+let weatherZdwdlist = [];
|
|
|
+
|
|
|
+let weatherImgDaylistRich = {};
|
|
|
+let weatherImgNightlistRich = {};
|
|
|
+
|
|
|
+let maxWD = 30;
|
|
|
+let minWD = 0;
|
|
|
+
|
|
|
+demoData.forEach((item) => {
|
|
|
+ weekday.push(item.week);
|
|
|
+ datelist.push(item.rq);
|
|
|
+ weatherDaylist.push(item.weatherTqDay);
|
|
|
+ weatherNightlist.push(item.weatherTqNight);
|
|
|
+ weatherImgDaylist.push(item.weatherImgDay);
|
|
|
+ weatherImgNightlist.push(item.weatherImgNight);
|
|
|
+ windDirectlist.push(item.windDirectDay);
|
|
|
+ windPowerlist.push(item.windPowerDay);
|
|
|
+ weatherZgwdlist.push(item.weatherZgwd);
|
|
|
+ weatherZdwdlist.push(item.weatherZdwd);
|
|
|
+});
|
|
|
+maxWD = Math.max(...weatherZgwdlist) + 30;
|
|
|
+minWD = Math.min(...weatherZdwdlist) - 30;
|
|
|
+let weatherImgDaylistStyle = weatherImgDaylist.map((item) => {
|
|
|
+ let dateUrl = item;
|
|
|
+ return {
|
|
|
+ backgroundColor: {
|
|
|
+ image: require("@/assets/images/home/qi-100.svg"),
|
|
|
+ },
|
|
|
+ height: 20,
|
|
|
+ width: 20,
|
|
|
+ color: "#fff"
|
|
|
+ };
|
|
|
+});
|
|
|
+let weatherImgNightlistStyle = weatherImgNightlist.map((item) => {
|
|
|
+ let dateUrl = item;
|
|
|
+ return {
|
|
|
+ backgroundColor: {
|
|
|
+ image: dateUrl,
|
|
|
+ },
|
|
|
+ height: 20,
|
|
|
+ width: 20,
|
|
|
+ };
|
|
|
+});
|
|
|
+weatherImgDaylistStyle.forEach((i, index) => {
|
|
|
+ weatherImgDaylistRich[index] = i;
|
|
|
+});
|
|
|
+weatherImgNightlistStyle.forEach((i, index) => {
|
|
|
+ weatherImgNightlistRich[index] = i;
|
|
|
+});
|
|
|
+
|
|
|
+const myChart = ref(null);
|
|
|
+const chartDom = ref(null);
|
|
|
+const options = {
|
|
|
+ grid: {
|
|
|
+ top: "-100px",
|
|
|
+ right: "20px",
|
|
|
+ bottom: '-80px',
|
|
|
+ left: "-20px",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ position: "top",
|
|
|
+ offset: 0,
|
|
|
+ zlevel: 100,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: ["{a|{value}}"].join("\n"),
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: weekday,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ position: "top",
|
|
|
+ offset: -40,
|
|
|
+ boundaryGap: false,
|
|
|
+ zlevel: 100,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: ["{a|{value}}"].join("\n"),
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ fontSize: 11,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: datelist,
|
|
|
+ axisPointer: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // type: "category",
|
|
|
+ // position: "top",
|
|
|
+ // offset: -40,
|
|
|
+ // boundaryGap: false,
|
|
|
+ // zlevel: 100,
|
|
|
+ // axisLine: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // interval: 0,
|
|
|
+ // formatter: ["{a|{value}}"].join("\n"),
|
|
|
+ // rich: {
|
|
|
+ // a: {
|
|
|
+ // color: "#fff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // data: weatherDaylist,
|
|
|
+ // axisPointer: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ position: "top",
|
|
|
+ offset: -65,
|
|
|
+ zlevel: 100,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: ["{{value}|}"].join("\n"),
|
|
|
+ // formatter: `<i class="qi-100-fill"></i>`,
|
|
|
+ // formatter: function(params) {
|
|
|
+ // // return `<i class="qi-100-fill"></i>`
|
|
|
+ // return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff"></span>`
|
|
|
+ // },
|
|
|
+ rich: weatherImgDaylistRich,
|
|
|
+ },
|
|
|
+ data: ["0", "1", "2", "3", "4", "5", "6","7"],
|
|
|
+ axisPointer: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ position: "top",
|
|
|
+ offset: -85,
|
|
|
+ boundaryGap: false,
|
|
|
+ zlevel: 100,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ formatter: ["{a|{value}°}"].join("\n"),
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: weatherZgwdlist,
|
|
|
+ axisPointer: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: {
|
|
|
+ show: false,
|
|
|
+ interval: 15,
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}" + "℃",
|
|
|
+ },
|
|
|
+ max: maxWD,
|
|
|
+ min: minWD,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "最高温度",
|
|
|
+ type: "line",
|
|
|
+ data: weatherZgwdlist,
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: true,
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FA8258", // 设置圆形的填充色
|
|
|
+ borderColor: "#ffffff", // 设置边框颜色
|
|
|
+ borderWidth: 1, // 设置边框宽度
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 2, // 设置折线的宽度
|
|
|
+ color: "#FA8258", // 设置折线的颜色
|
|
|
+ shadowColor: "#FA8258", // 线的阴影颜色
|
|
|
+ shadowBlur: 5, // 线的阴影模糊级数
|
|
|
+ shadowOffsetX: 0, // 线的阴影水平偏移
|
|
|
+ shadowOffsetY: 5, // 线的阴影垂直偏移
|
|
|
+ },
|
|
|
+ silent: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "最低温度",
|
|
|
+ type: "line",
|
|
|
+ data: weatherZdwdlist,
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: true,
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: "#2E9AFE", // 设置圆形的填充色
|
|
|
+ borderColor: "#ffffff", // 设置边框颜色
|
|
|
+ borderWidth: 1, // 设置边框宽度
|
|
|
+ },
|
|
|
+
|
|
|
+ lineStyle: {
|
|
|
+ width: 2, // 设置折线的宽度
|
|
|
+ color: "#2E9AFE", // 设置折线的颜色
|
|
|
+ shadowColor: "#2E9AFE", // 线的阴影颜色
|
|
|
+ shadowBlur: 5, // 线的阴影模糊级数
|
|
|
+ shadowOffsetX: 0, // 线的阴影水平偏移
|
|
|
+ shadowOffsetY: 5, // 线的阴影垂直偏移
|
|
|
+ },
|
|
|
+ silent: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ setTimeout(()=>{
|
|
|
+ initChart();
|
|
|
+ },200)
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+// watch(
|
|
|
+// () => props.list,
|
|
|
+// (newValue, oldValue) => {
|
|
|
+// // if(newValue){
|
|
|
+// // options.xAxis[0].data = newValue.map(item => item[1] + item[2])
|
|
|
+// // options.series[0].data = newValue.map(item => Math.floor(item[3]))
|
|
|
+// // }
|
|
|
+// myChart.value.setOption(options);
|
|
|
+// }
|
|
|
+// );
|
|
|
+
|
|
|
+const initChart = () => {
|
|
|
+ myChart.value = echarts.init(chartDom.value);
|
|
|
+ myChart.value.setOption(options);
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|