示例图
说明
依赖目录【左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>