vben
authored
|
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { mapData } from './data';
import 'echarts/map/js/china';
export default defineComponent({
props: {
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
|
vben
authored
|
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
|
},
},
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#e0ffff', '#006edd'],
symbolSize: [30, 100],
},
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, .6)',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
series: [
{
name: 'iphone4',
type: 'map',
mapType: 'china',
label: {
normal: {
show: true,
textStyle: {
color: 'rgb(249, 249, 249)',
fontSize: 10,
},
},
emphasis: {
show: true,
textStyle: {
color: 'rgb(249, 249, 249)',
fontSize: 14,
},
},
},
itemStyle: {
normal: {
label: { show: true },
areaColor: '#2f82ce',
borderColor: '#0DAAC1',
},
emphasis: {
label: { show: true },
areaColor: '#2f82ce',
},
},
data: mapData,
},
],
});
});
return { chartRef };
},
});
</script>
|