Vue3 は Echart を使用してカスタム マップを実装します
1. マップ JSON ファイルを取得する
Alibaba Cloud データ視覚化プラットフォームの使用をお勧めします。
地図を使用したいエリアを選択し、JSONファイルをダウンロードします
2. マップ JSON ファイルを Vue3 プロジェクトにインポートします
src/assets に入れます
マップを使用したいコンポーネントにインポートします
3. Echarts を使用してマップを作成する
マップコンテナを準備する
<template>
<div id="user_region">
</div>
</template>
Echartsのコードは次のとおりです
//创建用户地域分布
const createRegion = () => {
let mapChartInstance = null;
// 获取地图容器
let mapChart = document.getElementById("user_region");
mapChartInstance = markRaw(
echarts.init(mapChart, undefined, {
devicePixelRatio: 2, renderer: "svg" })
);
// 注册地图
echarts.registerMap("China", China);
mapChartInstance.setOption({
title: {
text: "用户地域分布",
left: 10,
top: 10,
textStyle: {
color: "#000",
fontSize: 16,
},
},
visualMap: {
show: true,
min: 0,
max: 10000,
type: "piecewise",
right: 50,
bottom: 20,
inRange: {
//控制颜色深浅
opacity: 0.35,
},
pieces: [
// 自定义每一段的范围，以及每一段的文字
{
gte: 50, color: "#17459e" },
{
gte: 20, lte: 50, color: "#3886e1" },
{
gte: 10, lte: 20, color: "#73b3f3" },
{
gte: 1, lte: 10, color: "#c0ddf9" },
{
lte: 1, color: "#ebedf0" },
],
},
series: [
{
name: "中华人民共和国",
type: "map",
map: 'China',
geoIndex: 0,
//假数据
data: [
{
name: "江苏省",
value: 100,
},
{
name: "北京市",
value: 86,
},
{
name: "上海市",
value: 68,
},
{
name: "重庆市",
value: 123,
},
{
name: "河北省",
value: 34,
},
{
name: "河南省",
value: 32,
},
{
name: "云南省",
value: 160,
},
{
name: "辽宁省",
value: 43,
},
{
name: "黑龙江省",
value: 181,
},
{
name: "湖南省",
value: 24,
},
{
name: "安徽省",
value: 33,
},
{
name: "山东省",
value: 54,
},
{
name: "新疆省",
value: 118,
},
{
name: "浙江省",
value: 44,
},
{
name: "江西省",
value: 220,
},
{
name: "湖北省",
value: 21,
},
{
name: "广西省",
value: 30,
},
{
name: "甘肃省",
value: 12,
},
{
name: "山西省",
value: 32,
},
{
name: "内蒙古省",
value: 35,
},
{
name: "陕西省",
value: 25,
},
{
name: "吉林省",
value: 45,
},
{
name: "福建省",
value: 28,
},
{
name: "贵州省",
value: 18,
},
{
name: "广东省",
value: 37,
},
{
name: "青海省",
value: 62,
},
{
name: "西藏省",
value: 43,
},
{
name: "四川省",
value: 33,
},
{
name: "宁夏省",
value: 8,
},
{
name: "海南省",
value: 19,
},
{
name: "台湾省",
value: 190,
},
{
name: "香港省",
value: 11,
},
{
name: "澳门省",
value: 10,
}, {
name: "内蒙古自治区",
value: 200
}, {
name: "天津市",
value: 230,
}, {
name: "广西壮族自治区",
value: 30,
}, {
name: "新疆维吾尔自治区",
value: 100,
}, {
name: "宁夏回族自治区",
value: 500,
}, {
name: "西藏自治区",
value: 70
}
],
label: {
show: true
}
},
],
tooltip: {
// 自定义弹窗
// 鼠标引入省份,不断触发.params 对象.当前省份的信息.
formatter: function (params) {
//console.log(params);
return params.seriesName + "<br>" + params.name + ":" + params.value + "人";
},
},
geo: {
// 使用地图
map: "China",
label: {
//显示地域标签
show: false,
//标签字体颜色
color: "#ffffff",
},
layoutCenter: ["50%", "50%"],
//地图尺寸
layoutSize: "120%",
// 缩放
aspectScale: 1,
itemStyle: {
//区域边框宽度
borderWidth: 0.5,
//区域边框颜色
borderColor: "#d1d1d1",
//区域颜色
areaColor: "#eeeeee",
},
emphasis: {
// 鼠标悬浮效果
itemStyle: {
borderWidth: 0.5,
borderColor: "#33ddff",
areaColor: "#26627f",
},
label: {
//对应的鼠标悬浮效果
show: true,
color: "#ffffff",
},
},
},
});
};
次に、マップを初期化する Echarts 関数を onMounted サイクルに配置します。
レンダリングは次のとおりです
予防：
- 初期化コードはonMountedで実行する必要があります
- マップコンテナには特定の高さが必要です
- シリーズ内の属性値は、data 内のデータを含め、定義されたマップ名に対応している必要があります。そうでない場合、必要なデータは表示されません (例: シミュレートされたデータの場合: data […{ name: "Jiangsu "
value : 100 }…]、マップ JSON ファイル内の都市名は江蘇省である
ため、データ値は表示されません)- マップをレスポンシブにしたい場合は、ウォッチで変更されたデータを監視する必要があります。最新のデータを取得した後、echarts の setOption() メソッドを通じて元のオプション データを追加し、変更されたデータを追加することもできます、これにより応答性が実現され、データの変化に応じてマップも変化します。