1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| <template>
| <div class="layout-padding">
| <div class="layout-padding-auto layout-padding-view">
| <div ref="echartsMapRef" style="height: 100%"></div>
| </div>
| </div>
| </template>
|
| <script setup lang="ts" name="funEchartsMap">
| import { reactive, onMounted, ref } from 'vue';
| import * as echarts from 'echarts';
| import 'echarts/extension/bmap/bmap';
| import { echartsMapList, echartsMapData } from './mock';
|
| // 定义变量内容
| const echartsMapRef = ref<RefType>('');
| const state = reactive({
| echartsMap: '' as unknown,
| echartsMapList,
| echartsMapData,
| });
|
| // echartsMap 将坐标信息和对应物理量的值合在一起
| const convertData = (data: EmptyObjectType[]) => {
| let res = [];
| for (let i = 0; i < data.length; i++) {
| let geoCoord = state.echartsMapData[data[i].name];
| if (geoCoord) {
| res.push({
| name: data[i].name,
| value: geoCoord.concat(data[i].value),
| });
| }
| }
| return res;
| };
| // 初始化 echartsMap
| const initEchartsMap = () => {
| const myChart = echarts.init(echartsMapRef.value);
| const option = {
| tooltip: {
| trigger: 'item',
| },
| color: ['#9a60b4', '#ea7ccc'],
| bmap: {
| center: [104.114129, 37.550339],
| zoom: 5,
| roam: true,
| mapStyle: {},
| },
| series: [
| {
| name: 'pm2.5',
| type: 'scatter',
| coordinateSystem: 'bmap',
| data: convertData(state.echartsMapList),
| symbolSize: function (val: any) {
| return val[2] / 10;
| },
| encode: {
| value: 2,
| },
| label: {
| formatter: '{b}',
| position: 'right',
| show: false,
| },
| emphasis: {
| label: {
| show: true,
| },
| },
| },
| {
| name: 'Top 5',
| type: 'effectScatter',
| coordinateSystem: 'bmap',
| data: convertData(
| state.echartsMapList
| .sort(function (a: any, b: any) {
| return b.value - a.value;
| })
| .slice(0, 6)
| ),
| symbolSize: function (val: any) {
| return val[2] / 10;
| },
| encode: {
| value: 2,
| },
| showEffectOn: 'render',
| rippleEffect: {
| brushType: 'stroke',
| },
| hoverAnimation: true,
| label: {
| formatter: '{b}',
| position: 'right',
| show: true,
| },
| itemStyle: {
| shadowBlur: 10,
| shadowColor: '#333',
| },
| zlevel: 1,
| },
| ],
| };
| myChart.setOption(option);
| window.addEventListener('resize', () => {
| myChart.resize();
| });
| };
| // 页面加载时
| onMounted(() => {
| initEchartsMap();
| });
| </script>
|
|
