子組件<template><div><div>【云端報警風險】</div><div ref="target" class="w-full h-full"></div></div>
</template><script setup>
import { ref, onMounted,watch } from 'vue';
import * as echarts from "echarts";
// 定義接收父組件傳來的值
const props = defineProps({data: {type: Object,required: true,},
});
// console.log(props.data);
// 1.初始化
let myChart = null;
const target = ref(null);
onMounted(() => {myChart = echarts.init(target.value);renderChart();
});// 2.構建 option 配置對象
const renderChart = () => {const options = {// 雷達圖坐標系配置radar: {name: {textStyle: {color: "#05D5FF",fontSize: 14}},shape: 'polygon',center: ['50%', '50%'],radius: '80%',startAngle: 120,// 軸線axisLine: {lineStyle: {color: 'rgba(2,213,255,.8)'}},// 網格線splitLine: {show: true,lineStyle: {with: 1,color: 'rgba(5,213,255,.8)'}},// 指示器名稱indicator: props.data.risks.map(item => ({name: item.name,max: 100})),splitArea: {show:false}},// 位置、極點polar: {center: ['50%', '50%'],radius:'0%'},// 坐標角度angleAxis: {min: 0,interval: 5,clockwise:false,//刻度逆時針},// 徑向軸radiusAxis: {min: 0,interval: 20,splitLine: {show:true}},// 圖表核心配置series: {type: 'radar',symbol: 'circle',symbolSize: 10,itemStyle: {normal: {color:'#05D5FF'}},areaStyle: {normal: {color: '#05D5FF',opacity:0.5}},lineStyle: {with: 2,color:'#05D5FF'},label: {normal: {show:true,color: '#05D5FF',}},data: [{value:props.data.risks.map(item=>item.value)}]}}// 3.通過實例.setOptions(option)myChart.setOption(options);
};
watch(() => props.data,renderChart)</script><style lang="scss" scoped></style>監聽瀏覽器const $router = useRouter()// 獲取寬度
const windowSize = () => {let width = document.documentElement.clientWidth;width<=768?$router.push({ path: "/m" }):""
}
window.addEventListener("resize", windowSize);
windowSize()
echarts 地圖app.vue<script setup>
import { RouterView } from 'vue-router'
import { provide } from 'vue';
import * as echarts from 'echarts'
import chalk from '@/assets/theme/chalk'
import SocketService from './utils/socket_service'echarts.registerTheme('chalk', chalk)
provide('echarts', echarts) //重點
provide('socket', SocketService.Instance)
</script><template><RouterView />
</template><style scoped></style>子組件<script setup>
import { ref, inject, onMounted, onBeforeUnmount } from 'vue';
import useRequest from '@/composables/useRequest'
import chinaJson from '@/assets/map/china.json'
import { getProvinceMapInfo } from '@/utils/map_utils.js'const echarts = inject('echarts')
const map_chart = ref(null)
let chartInstance = null
const initChart = () => {chartInstance = echarts.init(map_chart.value, 'chalk')echarts.registerMap('china', chinaJson)chartInstance.on('click', async (arg) => {const provinceInfo = getProvinceMapInfo(arg.name)// console.log(import.meta); //讀取該文件的模塊路徑if (provinceInfo.key) {const areaData = await getAreaData(provinceInfo.path)echarts.registerMap(provinceInfo.key, { ...areaData })chartInstance.setOption({geo: {map: provinceInfo.key}})}})
}const getAreaData = (path) => import(/* @vite-ignore */path)const updataChart = () => {const titleFontSize = map_chart.value.offsetWidth / 100 * 3.6const option = {title: {text: "▎商家分布",left: 20,top: 20,textStyle: {fontSize: map_chart.value.offsetWidth / 100 * 2.5,}},legend: {left: '5%',bottom: '5%',orient: 'vertical',itemWidth: titleFontSize,itemHeight: titleFontSize,itemGap: titleFontSize,textStyle: {fontSize: titleFontSize / 2}},geo: {type: 'map',map: 'china',top: "5%",bottom: "5%",itemStyle: {areaColor: '#2E72BF',borderColor: '#333'}},}chartInstance.setOption(option)
}
const updataChartData = () => {const option = {series: seriesArr.value}chartInstance.setOption(option)
}const allData = ref([])
const seriesArr = ref([]) //放棄使用dataset，有點復雜不會弄。。。
const getData = async () => {const res = await useRequest('/map')allData.value = resseriesArr.value = res.map(i => ({type: 'effectScatter',rippleEffect: {scale: 5,brushType: 'stroke'},name: i.name,data: i.children,coordinateSystem: 'geo',//在地圖使用散點需要加上這項}))updataChartData()
}const screenAdapter = () => {updataChart()chartInstance.resize()
}onMounted(() => {getData()initChart()screenAdapter()window.addEventListener('resize', screenAdapter)
})
onBeforeUnmount(() => {window.removeEventListener('resize', screenAdapter)
})
defineExpose({screenAdapter
})
</script><template><div class="map_container"><div class="map_chart" ref="map_chart" @dblclick="updataChart"></div></div>
</template><style scoped>
.map_container,
.map_chart {width: 100%;height: 100%;overflow: hidden;
}
</style>使用<div class="map" :class="fullScreenStatus.map ? 'fullscreen' : ''"><Map ref="map"></Map><span @click="changeSize('map')" class="iconfont enlargement":class="fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt'"></span></div>map_utils.jsconst nameChange = {安徽: 'anhui',陜西: 'shanxi1',澳門: 'aomen',北京: 'beijing',重慶: 'chongqing',福建: 'fujian',甘肅: 'gansu',廣東: 'guangdong',廣西: 'guangxi',貴州: 'guizhou',海南: 'hainan',河北: 'hebei',黑龍江: 'heilongjiang',河南: 'henan',湖北: 'hubei',湖南: 'hunan',江蘇: 'jiangsu',江西: 'jiangxi',吉林: 'jilin',遼寧: 'liaoning',內蒙古: 'neimenggu',寧夏: 'ningxia',青海: 'qinghai',山東: 'shandong',上海: 'shanghai',山西: 'shanxi',四川: 'sichuan',臺灣: 'taiwan',天津: 'tianjin',香港: 'xianggang',新疆: 'xinjiang',西藏: 'xizang',云南: 'yunnan',浙江: 'zhejiang'
}export function getProvinceMapInfo (arg) {const path = `/src/assets/map/province/${nameChange[arg]}`return {key: nameChange[arg],path: path}
}socket_service.jsexport default class SocketService {static instance = nullstatic get Instance() {if (!this.instance) {this.instance = new SocketService()}return this.instance}ws = nullconnected = falseconnectRetryCount = 0connect() {if (!window.WebSocket) {return console.log('瀏覽器不支持websocket');}this.ws = new WebSocket('ws://localhost:9998')this.ws.onopen = () => {console.log('服務器連接成功');this.connected = truethis.connectRetryCount = 0}// 鏈接失敗或連接后斷開會調用this.ws.onclose = () => {console.log('連接服務器失敗');this.connected = falsethis.connectRetryCount++setTimeout(() => {this.connect()}, this.connectRetryCount * 500)}this.ws.onmessage = msg => {console.log('從服務器獲取到了數據');// console.log(msg.data);const recvData = JSON.parse(msg.data)const socketType = recvData.socketTypeif (this.callBackMapping[socketType]) {const action = recvData.actionif (action === 'getData') {const realData = JSON.parse(recvData.data)this.callBackMapping[socketType].call(this, realData)} else if (action === 'fullScreen') {} else if (action === 'themeChange') {}}}}callBackMapping = {}registerCallBack(socketType, callBack) {this.callBackMapping[socketType] = callBack}unRegisterCallBack(socketType) {this.callBackMapping[socketType] = callBack}sendRetryCount = 0send(data) {if (this.connected) {this.sendRetryCount = 0this.ws.send(JSON.stringify(data))} else {this.sendRetryCount++setTimeout(() => {this.send(data)}, this.sendRetryCount * 500)}}
}main.js引入import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'// 重置樣式
import 'normalize.css'// 字體文件
import './assets/font/iconfont.css'import './assets/main.css'import SocketService from './utils/socket_service'
// 開啟websocket
SocketService.Instance.connect()const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')
)
