更新图表

zhouwenxuan

2023-10-09 0c496e7063f67a8b1af9ff3e2680d896e8d9d158

更新图表

 src/types/monitorData.d.ts

@@ -70,7 +70,7 @@
        };
        gasList: Array<any>;
        areaList: Array<any>;
    }
    },
}

export interface TableWeatherRow {
@@ -97,4 +97,4 @@
        };
        weatherTypeList: Array<any>;
    }
}
}

 src/views/monitorData/fluxData/index.vue

@@ -78,7 +78,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 {TableFluxState} from "/@/types/monitorData";
@@ -103,8 +103,10 @@
        },
        gasList: [],
        areaList: [],
    }
    },
});

const myChart = shallowRef(null)

const chooseTime = (val:any) => {
    console.log("val",val)
@@ -154,7 +156,7 @@
const yData = ref([]);
const areaChart = ref([]as any);
const initInfoData = async () => {
    //折线图
    //柱状图
    const chartParam = {
        startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss'),
@@ -167,7 +169,7 @@
        areaChart.value = yData.value.map((item: any) => {
            return item.name
        });
        dataZoomEnd.value = xData.value.length > 25 ? 2 : 100;
        dataZoomEnd.value = xData.value.length > 25 ? 5 : 100;
        initCharts();
    }else {
        ElMessage({
@@ -214,7 +216,6 @@
    let finalResult = []as any;
    target.map((item: any) => {
        let key = item.regionName;
        //如果有这个key，就push一个对象
        if (obj[key]) {
            obj[key].push(item);
        } else {
@@ -306,7 +307,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: {
@@ -362,10 +366,10 @@
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option,true);
    myChart.value.setOption(option,true);
    //自适应宽度
    window.addEventListener('resize', function () {
        myChart.resize();
        myChart.value.resize();
    })
}
</script>
@@ -388,4 +392,4 @@
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    padding: 3px
}
</style>
</style>

 src/views/monitorData/gasData/index.vue

@@ -67,7 +67,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 {TableGasState} from "/@/types/monitorData";
@@ -116,6 +116,7 @@
const xData = ref([]);
const yData = ref([]);
const markLines = ref(0);
const myChart = shallowRef(null)
onMounted(
    () => {
        getNowTime();
@@ -214,7 +215,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: {
@@ -272,10 +276,10 @@
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option,true);
    myChart.value.setOption(option,true);
    //自适应宽度
    window.addEventListener('resize', function () {
        myChart.resize();
        myChart.value.resize();
    })
}
</script>
@@ -298,4 +302,4 @@
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    padding: 3px
}
</style>
</style>

 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>