vue3 echarts地图（各省的json数据跟china.json）

刚开始学<template><div class="hello"><div ref="chart" id="echarts" style="height: 500px; width: 600px"></div><button @click="remove">返回中国地图</button></div></tem

阿松skr

6633人浏览 · 2022-03-11 14:12:05

阿松skr · 2022-03-11 14:12:05 发布

刚开始学记录一下

<template>
  <div class="hello">
    <div ref="chart" id="echarts" style="height: 500px; width: 600px"></div>
    <button @click="remove">返回中国地图</button>
  </div>
</template>

<script setup>
import * as echarts from "echarts";   //引入echarts
import china from "@/assets/json/china.json";
import fujian from "@/assets/json/fujian.json";
import anhui from "@/assets/json/anhui.json";
import aomen from "@/assets/json/aomen.json";
import beijing from "@/assets/json/beijing.json";
import chongqing from "@/assets/json/chongqing.json";
import gansu from "@/assets/json/gansu.json";
import guangdong from "@/assets/json/guangdong.json";
import guangxi from "@/assets/json/guangxi.json";
import guizhou from "@/assets/json/guizhou.json";
import hainan from "@/assets/json/hainan.json";
import hebei from "@/assets/json/hebei.json";
import heilongjiang from "@/assets/json/heilongjiang.json";
import henan from "@/assets/json/henan.json";
import hubei from "@/assets/json/hubei.json";
import hunan from "@/assets/json/hunan.json";
import jiangsu from "@/assets/json/jiangsu.json";
import jiangxi from "@/assets/json/jiangxi.json";
import jilin from "@/assets/json/jilin.json";
import liaoning from "@/assets/json/liaoning.json";
import neimenggu from "@/assets/json/neimenggu.json";
import ningxia from "@/assets/json/ningxia.json";
import qinghai from "@/assets/json/qinghai.json";
import shandong from "@/assets/json/shandong.json";
import shanghai from "@/assets/json/shanghai.json";
import shanxi2 from "@/assets/json/shanxi (2).json";
import shanxi from "@/assets/json/shanxi.json";
import sichuan from "@/assets/json/sichuan.json";
import taiwan from "@/assets/json/taiwan.json";
import tianjin from "@/assets/json/tianjin.json";
import xianggang from "@/assets/json/xianggang.json";
import xinjiang from "@/assets/json/xinjiang.json";
import xizang from "@/assets/json/xizang.json";
import yunnan from "@/assets/json/yunnan.json";
import zhejiang from "@/assets/json/zhejiang.json";
import { onMounted, reactive, ref } from "vue";

const chart = ref();

// 各省的人口数据
const mapData = [
  { name: "河北省", value: 10000 },
  { name: "山西省", value: 9000 },
  { name: "辽宁省", value: 4000 },
  { name: "吉林省", value: 5000 },
  { name: "黑龙江省", value: 6000 },
  { name: "江苏省", value: 2000 },
  { name: "浙江省", value: 800 },
  { name: "安徽省", value: 2000 },
  { name: "福建省", value: 4600 },
  { name: "江西省", value: 3200 },
  { name: "山东省", value: 200 },
  { name: "河南省", value: 200 },
  { name: "湖北省", value: 2060 },
  { name: "湖南省", value: 3000 },
  { name: "广东省", value: 2900 },
  { name: "海南省", value: 2000 },
  { name: "四川省", value: 2120 },
  { name: "贵州省", value: 2350 },
  { name: "云南省", value: 2000 },
  { name: "陕西省", value: 2890 },
  { name: "甘肃省", value: 2740 },
  { name: "青海省", value: 2660 },
  { name: "台湾省", value: 2440 },
  { name: "内蒙古自治区", value: 2350 },
  { name: "广西壮族自治区", value: 2700 },
  { name: "西藏自治区", value: 2000 },
  { name: "宁夏回族自治区", value: 2000 },
  { name: "新疆维吾尔自治区", value: 2000 },
  { name: "北京市", value: 2000 },
  { name: "天津市", value: 2000 },
  { name: "上海市", value: 2000 },
  { name: "重庆市", value: 2000 },
  { name: "香港特别行政区", value: 2000 },
  { name: "澳门特别行政区", value: 2000 },
  { name: "南海诸岛", value: 800 },
];
// 用做点击完带到init方法的数据
const provinces = {
  台湾省: taiwan,
  河北省: hebei,
  山西省: shanxi,
  辽宁省: liaoning,
  吉林省: jilin,
  黑龙江省: heilongjiang,
  江苏省: jiangsu,
  浙江省: zhejiang,
  安徽省: anhui,
  福建省: fujian,
  江西省: jiangxi,
  山东省: shandong,
  河南省: henan,
  湖北省: hubei,
  湖南省: hunan,
  广东省: guangdong,
  海南省: hainan,
  四川省: sichuan,
  贵州省: guizhou,
  云南省: yunnan,
  陕西省: shanxi2,
  甘肃省: gansu,
  青海省: qinghai,
  新疆维吾尔自治区: xinjiang,
  广西省: guangxi,
  内蒙古自治区: neimenggu,
  宁夏回族自治区: ningxia,
  西藏自治区: xizang,
  北京市: beijing,
  天津市: tianjin,
  上海市: shanghai,
  重庆市: chongqing,
  香港特别行政区: xianggang,
  澳门特别行政区: aomen,
};
// const mapData = [
//   {name: '漳州市', value: 10100},
//   {name: '南平市', value: 12000},
//   {name: '三明市', value: 10300},
//   {name: '龙岩市', value: 10700},
//   {name: '厦门市', value: 100},
//   {name: '莆田市', value: 1200},
//   {name: '福州市', value: 3000},
//   {name: '泉州市', value: 1900},
//   {name: '宁德市', value: 1090},
// ]

const init = (name) => {
  // 获取图标 初始化
  var myChart = echarts.init(document.getElementById("echarts"));

  // 图标指定数据
  echarts.registerMap(name, name);

  const option = {
    // 图标标题
    title: {
      text: "地图",
    },
    // 鼠标移入显示的内容
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} (p / km2)",
    },
    // 数据视图
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    // 用于设置地图的高量
    visualMap: {
      min: 800,
      max: 5000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"],
      },
    },
    geo: [
      {
        // 指定图标为地图
        type: "map",
        // 设置数据
        map: name,
        zoom: 1.2, // 改变这个值的大小就可以了
        // 开启缩放
        roam: true,
        // 设置缩放的大小
        scaleLimit: {
          min: 1.2,
          max: 30,
        },
      },
    ],
    series: [
      {
        type: "map",
        // 跟geo关联
        geoIndex: 0,
        // 设置人口的数据  用于显示在地图上
        data: mapData,
      },
    ],
  };

  // 把option设置给myChart实例
  myChart.setOption(option, true);

  // 点击切换到省份
  myChart.on("click", function (params) {
    // 拿到点击的哪一个省份 用provinces里面对象的数据带到init方法里面用于渲染省份
    init(provinces[params.name]);
  });
};

// 点击回到中国地图
function remove() {
  init(china);
}

// 加载完就调用的方法 vue3生命周期
onMounted(() => {
  init(china);
});
</script>

<style scoped>
</style>