| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-11-04 16:32:04 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-20 19:01:15 |
| | | * @LastEditTime: 2024-12-02 21:00:44 |
| | | * @FilePath: \bigScreen\src\views\survey\components\box\dataContent.vue |
| | | * @Description: |
| | | * |
| | |
| | | // import { ref, reactive, onMounted, nextTick, inject } from 'vue' |
| | | import { useEchartsResize } from "hooks/useEchartsResize" |
| | | import { getRescueTeamStatistic } from "@/api/indParkInfo" |
| | | import { nextTick } from "vue" |
| | | import { nextTick, onUnmounted } from "vue" |
| | | |
| | | let $echarts = inject("echarts") |
| | | const curEcharts = ref(null) |
| | | |
| | | let myEcharts = reactive(null) |
| | | let myEcharts = reactive({ |
| | | chart: null |
| | | }) |
| | | |
| | | const echartsColors = ['#1E90FF', '#36A2EB', '#FFD700', '#FFA500', '#228B22', '#8FBC8F'] |
| | | |
| | |
| | | yaxis_data.push(element.num) |
| | | }) |
| | | |
| | | myEcharts.setOption({ |
| | | tooltip: { |
| | | trigger: "axis", |
| | | axisPointer: { |
| | | type: "shadow", |
| | | }, |
| | | }, |
| | | myEcharts.chart.setOption({ |
| | | tooltip: {}, |
| | | grid: { |
| | | top: "6%", |
| | | left: "6%", |
| | |
| | | interval: 0, //设置为 1,表示『隔一个标签显示一个标签』 |
| | | margin: 15, |
| | | rotate: 45, //调整数值改变倾斜的幅度(范围-90到90) |
| | | textStyle: { |
| | | color: "#fff", |
| | | fontStyle: "normal", |
| | | fontFamily: "微软雅黑", |
| | | fontSize: 12, |
| | | }, |
| | | color: "#fff", |
| | | fontStyle: "normal", |
| | | fontFamily: "微软雅黑", |
| | | fontSize: 12, |
| | | }, |
| | | }, |
| | | ], |
| | |
| | | } |
| | | |
| | | nextTick(() => { |
| | | myEcharts = $echarts.init(curEcharts.value) |
| | | myEcharts.chart = $echarts.init(curEcharts.value) |
| | | getStatistic() |
| | | }) |
| | | |
| | | const echartsResize = () => { |
| | | myEcharts && myEcharts.resize() |
| | | myEcharts.chart && myEcharts.chart.resize() |
| | | } |
| | | |
| | | useEchartsResize(echartsResize) |
| | | |
| | | onUnmounted(() => { |
| | | if (myEcharts.chart) { |
| | | myEcharts.chart.clear() |
| | | myEcharts.chart.dispose() |
| | | |
| | | myEcharts.chart = null |
| | | } |
| | | }) |
| | | </script> |
| | | |
| | | <template> |