Echarts5之地图实现

示例图

说明

依赖目录【左v5右v4】

实现

<template>
    <div id="bmap" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight+'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import { createPinia } from 'pinia'
import china from '@/components/maps/map/json/china.json'
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  type TooltipComponentOption,
  GeoComponent,
  type GeoComponentOption,
  LegendComponent,
  type LegendComponentOption,
  VisualMapComponent,
  type VisualMapComponentOption,
  GridComponent, 
  type GridComponentOption,
  MarkPointComponent,
  type MarkPointComponentOption,
  TitleComponent,
  type TitleComponentOption
} from 'echarts/components';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { MapChart, type MapSeriesOption } from 'echarts/charts';
import { useChartsStore } from '@/stores/charts';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
echarts.use([
  TooltipComponent,
  GeoComponent,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  VisualMapComponent,
  MapChart,
  GridComponent,
  MarkPointComponent,
  LegendComponent,
  TitleComponent
]);

type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GeoComponentOption
  | LegendComponentOption
  | VisualMapComponentOption
  | MapSeriesOption
  | GridComponentOption
  | MarkPointComponentOption
  | LegendComponentOption
  | TitleComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    echarts.registerMap('china', china);
    var chartDom = document.getElementById('bmap')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {show: true, name: "中国地图"},
        color: chartStore.colors,
        grid: { show: true, left: "0", right: "0", bottom: "0", top: "0", borderColor: "transparent" },
        geo: {
            show: true,
            map: 'china',
            roam: true,
            zoom: 1.2,
            nameMap: {'China' : '中国'},
            label: { show: true, color: '#ffffff'},
            itemStyle: {
                areaColor: '#1764E8',
                borderColor: '#fefefe',
                borderWidth: 2,
                borderType: 'dashed'
            },
            emphasis: {
                disabled: false,
                label: { show: true, color: '#ffffff', fontSize: 20,},
                itemStyle: {
                    areaColor: '#0e3c8b',
                    borderColor: '#2e74ea',
                    borderWidth: 4,
                    borderType: 'soild'
                },
            },
            select: {
                disabled: false,
                label: { show: true, color: '#000000', fontSize: 24},
                itemStyle: {
                    areaColor: '#5d93ef',
                    borderColor: '#2e74ea',
                    borderWidth: 4,
                    borderType: 'soild'
                },
            },
            
            left: '10%',
            top: '10%',
        },
        tooltip: {
            show: true,
            position: 'right',
            formatter: (param, index) => {
                return param.value ?  [param.name+"：", param.value].join('\n') : null
            },
            backgroundColor: '#a2c1f6',
            borderColor: '#0e3c8b',
            borderWidth: 2,
            textStyle: { 
                color: 'blue',
                fontSize: 18,
                fontWeight: 600
            }
        },
        series: [
            {
                type: 'map',
                map: 'china', // 指定为苏州地图
                geoIndex: 0,
                selectedMode: 'multiple',
                data: [
                    { name: "黑龙江", value: 1000, selected: true,},
                    { name: "北京", value: 120, selected: true,},
                    { name: "广东", value: 100, selected: true,},
                    { name: "上海", value: 150, selected: true,},
                ],
            }
        ]
    };

    option && myChart.setOption(option);
})
</script>
<style scope></style>