<template> <div ref="chartRef" :style="{ height, width }"></div> </template> <script lang="ts"> import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'; import { useECharts } from '/@/hooks/web/useECharts'; import { mapData } from './data'; import { registerMap } from 'echarts'; export default defineComponent({ props: { width: { type: String as PropType<string>, default: '100%', }, height: { type: String as PropType<string>, default: 'calc(100vh - 78px)', }, }, setup() { const chartRef = ref<HTMLDivElement | null>(null); const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); onMounted(async () => { const json = (await (await import('./china.json')).default) as any; registerMap('china', json); 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', map: 'china', label: { show: true, color: 'rgb(249, 249, 249)', fontSize: 10, }, itemStyle: { areaColor: '#2f82ce', borderColor: '#0DAAC1', }, data: mapData, }, ], }); }); return { chartRef }; }, }); </script>