|
@@ -3,7 +3,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { onMounted, ref, watch } from "vue";
|
|
|
|
|
|
+import { onMounted, ref, nextTick } from "vue";
|
|
import * as echarts from "echarts";
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
// const props = defineProps({
|
|
// const props = defineProps({
|
|
@@ -256,6 +256,7 @@ const options = {
|
|
},
|
|
},
|
|
xAxis: [
|
|
xAxis: [
|
|
{
|
|
{
|
|
|
|
+ // 图标
|
|
type: "category",
|
|
type: "category",
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
position: "top",
|
|
position: "top",
|
|
@@ -279,9 +280,10 @@ const options = {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- data: weekday,
|
|
|
|
|
|
+ data: [],
|
|
},
|
|
},
|
|
{
|
|
{
|
|
|
|
+ // 日期
|
|
type: "category",
|
|
type: "category",
|
|
position: "top",
|
|
position: "top",
|
|
offset: -40,
|
|
offset: -40,
|
|
@@ -302,37 +304,11 @@ const options = {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- data: datelist,
|
|
|
|
|
|
+ data: [],
|
|
axisPointer: {
|
|
axisPointer: {
|
|
show: false,
|
|
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",
|
|
type: "category",
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
@@ -355,12 +331,13 @@ const options = {
|
|
// },
|
|
// },
|
|
rich: weatherImgDaylistRich,
|
|
rich: weatherImgDaylistRich,
|
|
},
|
|
},
|
|
- data: ["0", "1", "2", "3", "4", "5", "6","7"],
|
|
|
|
|
|
+ data: ["0", "1", "2", "3", "4", "5", "6"],
|
|
axisPointer: {
|
|
axisPointer: {
|
|
show: false,
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
{
|
|
|
|
+ // 最高温度
|
|
type: "category",
|
|
type: "category",
|
|
position: "top",
|
|
position: "top",
|
|
offset: -85,
|
|
offset: -85,
|
|
@@ -387,6 +364,7 @@ const options = {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
{
|
|
|
|
+ // 最低温度
|
|
type: "category",
|
|
type: "category",
|
|
position: "bottom",
|
|
position: "bottom",
|
|
offset: -88,
|
|
offset: -88,
|
|
@@ -475,9 +453,17 @@ const options = {
|
|
};
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
- setTimeout(()=>{
|
|
|
|
- initChart();
|
|
|
|
- },200)
|
|
|
|
|
|
+
|
|
|
|
+ const point = sessionStorage.getItem('point')
|
|
|
|
+ // 获取气象图表数据
|
|
|
|
+ VE_API.mini_farm.gardenItemChart({point}).then(({data}) =>{
|
|
|
|
+ console.log('tq', data)
|
|
|
|
+ // minData.value = res.data.weatherData.map(item =>item.tempMin)
|
|
|
|
+ // lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ initChart(data.weatherData);
|
|
|
|
+ })
|
|
|
|
+ })
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
@@ -492,11 +478,22 @@ onMounted(() => {
|
|
// }
|
|
// }
|
|
// );
|
|
// );
|
|
|
|
|
|
-const initChart = () => {
|
|
|
|
|
|
+const initChart = (weatherData) => {
|
|
myChart.value = echarts.init(chartDom.value);
|
|
myChart.value = echarts.init(chartDom.value);
|
|
|
|
+ options.xAxis[0].data = weatherData.map(item => dateFormat(item.fxDate))
|
|
|
|
+ options.xAxis[1].data = weatherData.map(item => dateFormat(item.fxDate))
|
|
|
|
+ // options.xAxis[2].data = weatherData.map(item => dateFormat(item.fxDate))
|
|
|
|
+ options.xAxis[3].data = weatherData.map(item => item.tempMax)
|
|
|
|
+ options.xAxis[4].data = weatherData.map(item => item.tempMin)
|
|
|
|
+ options.series[0].data = weatherData.map(item => item.tempMax)
|
|
|
|
+ options.series[1].data = weatherData.map(item => item.tempMin)
|
|
|
|
+ console.log('options', options)
|
|
myChart.value.setOption(options);
|
|
myChart.value.setOption(options);
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+function dateFormat(date) {
|
|
|
|
+ return date.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$2/$3")
|
|
|
|
+}
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|