更新图表

zhouwenxuan

2023-10-09 0c496e7063f67a8b1af9ff3e2680d896e8d9d158

 src/views/monitorData/weatherData/index.vue

@@ -64,7 +64,7 @@
</template>

<script setup lang="ts">
import {reactive, ref,onMounted} from "vue";
import {reactive, ref, onMounted, shallowRef} from "vue";
import * as echarts from "echarts";
import { ElMessage, ElMessageBox } from 'element-plus'
import {TableWeatherState} from "/@/types/monitorData";
@@ -112,6 +112,7 @@
const dataZoomEnd = ref();
const xData = ref([]);
const yData = ref([]);
const myChart = shallowRef(null)

const chooseTime = (val: any) => {
    console.log("val",val)
@@ -228,7 +229,10 @@
}

const initCharts = () => {
    const myChart = echarts.init(document.getElementById('gasChart'));
    if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
        myChart.value.dispose();
    }
    myChart.value = echarts.init(document.getElementById('gasChart'));
    // 指定图表的配置项和数据
    const option = {
        tooltip: {
@@ -269,10 +273,10 @@
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option,true);
    myChart.value.setOption(option,true);
    //自适应宽度
    window.addEventListener('resize', function () {
        myChart.resize();
        myChart.value.resize();
    })
}
</script>
@@ -295,4 +299,4 @@
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    padding: 3px
}
</style>
</style>