vue3+echarts绘制中国地图

最近接到一个需求是做一个中国地图 样式大概是这样的

在这里插入图片描述

需求是要去掉南海，但是由于csdn地图校验，图片如果没有南海会出现图片违规情况，要实现去掉南海，百度查阅相关资料都是说要这样，这个方法的大概意思就是：在地图中对特定的区域配置样式。穿梭车

regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              normal: {
                opacity: 0,
                label: {
                  show: false,
                },
              },
            },
          },
        ],

经实现还是不行，因为可能是因为我用的china.json的问题，只有一部分小的那个南海群岛去掉了，但是地图鸡脚那个地方的依旧显示。百度后需要替换json数据，穿梭车里边包含2个json，一个是去掉了南海诸岛，一个是保留的，加上上边的代码可以完整实现。

代码

首先我们需要引入echarts，现在echarts应该已经到5了，我们开发的时候建议看v5的版本

npm install echarts --save 或者
cnpm install echarts --save

引入成功后

import * as echarts from 'echarts'
import china from '../public/china.json';
echarts.registerMap('china', china);
app.config.globalProperties.$echarts = echarts

//注意如果不显示的话，需要给myMap增加固定的高和宽
<div id="myMap" ref="myMap" class="border"></div>

<script>
import {
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
} from "vue";
export default defineComponent({
setup(){
let { proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({
      backgroundColor: "#FFFFFF",
      geo: {
        map: "china",
        roam: false,
        zoom: 1.2,
        scaleLimit: { min: 0, max: 3 }, // 缩放级别
        regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              normal: {
                opacity: 0,
                label: {
                  show: false,
                },
              },
            },
          },
        ],
        itemStyle: {
          areaColor: "#BEDAEE", //默认的地图板块颜色
          borderWidth: 1,
          borderColor: "#009ce0",
        },
      },
      title: {
        text: "资源池分步",
        x: "center",
        y: 20,
      },
      tooltip: {
        trigger: "item",
      },

      //配置属性
      series: [
        {
          name: "数据",
          type: "map",
          mapType: "china",
          roam: false,
          geoIndex: 0,
          label: {
            normal: {
              show: false, //省份名称,
            },
            emphasis: {
              show: false,
            },
          },
          data: [
            { name: "北京", value: Math.round(Math.random() * 500) },
            { name: "天津", value: Math.round(Math.random() * 500) },
            { name: "上海", value: Math.round(Math.random() * 500) },
            { name: "重庆", value: Math.round(Math.random() * 500) },
            { name: "河北", value: Math.round(Math.random() * 500) },
            { name: "河南", value: Math.round(Math.random() * 500) },
            { name: "云南", value: Math.round(Math.random() * 500) },
            { name: "辽宁", value: Math.round(Math.random() * 500) },
            { name: "黑龙江", value: Math.round(Math.random() * 500) },
            { name: "湖南", value: Math.round(Math.random() * 500) },
            { name: "安徽", value: Math.round(Math.random() * 500) },
            { name: "山东", value: Math.round(Math.random() * 500) },
            { name: "新疆", value: Math.round(Math.random() * 500) },
            { name: "江苏", value: Math.round(Math.random() * 500) },
            { name: "浙江", value: Math.round(Math.random() * 500) },
            { name: "江西", value: Math.round(Math.random() * 500) },
            { name: "湖北", value: Math.round(Math.random() * 500) },
            { name: "广西", value: Math.round(Math.random() * 500) },
            { name: "甘肃", value: Math.round(Math.random() * 500) },
            { name: "山西", value: Math.round(Math.random() * 500) },
            { name: "内蒙古", value: Math.round(Math.random() * 500) },
            { name: "陕西", value: Math.round(Math.random() * 500) },
            { name: "吉林", value: Math.round(Math.random() * 500) },
            { name: "福建", value: Math.round(Math.random() * 500) },
            { name: "贵州", value: Math.round(Math.random() * 500) },
            { name: "广东", value: Math.round(Math.random() * 500) },
            { name: "青海", value: Math.round(Math.random() * 500) },
            { name: "西藏", value: Math.round(Math.random() * 500) },
            { name: "四川", value: Math.round(Math.random() * 500) },
            { name: "宁夏", value: Math.round(Math.random() * 500) },
            { name: "海南", value: Math.round(Math.random() * 500) },
            { name: "台湾", value: Math.round(Math.random() * 500) },
            { name: "香港", value: Math.round(Math.random() * 500) },
            { name: "澳门", value: Math.round(Math.random() * 500) },
          ], //数据
        },
      ],
    });
    onMounted(() => {
      console.log(proxy, chart.value, mapOption.value);
      chart.value = proxy.$echarts.init(
        document.getElementById("myMap"),
        "macarons"
      );
      chart.value.setOption(mapOption.value);
      // this.chart.on("click", function(params) {
      //   //此点击事件也可以做为其他echarts图表的点击 事件
      //   alert(params.name);
      //   console.info(params);
      // });
      
    });
}
})
</script>

还有一张地图是这样的

在这里插入图片描述

这里边也去掉了南海，如果你的需要增加，请按照最上边修改China.json,并修改下边regions的南海诸岛的样式
每个地图板块的颜色不一样。这个百度我没找到方法，所以就自己看文档找到了一个实现方法，如果有更好的方法实现方法，可以共同交流。
实现方法见下

//记住一定要给这个id加宽高
<div id="NationView" ref="NationView"></div>
<script>
import {
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
} from "vue";
export default defineComponent({
setup(){
let { proxy } = getCurrentInstance();
const chart = ref(null);
const mapOption = ref({
      backgroundColor: "#FFFFFF",
      geo: {
        map: "china",
        roam: false,
        zoom: 1.2,
        scaleLimit: { min: 0, max: 3 }, // 缩放级别
        regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              normal: {
                opacity: 0,
                label: {
                  show: false,
                },
              },
            },
          },
          {
            name: "新疆",
            value: Math.round(Math.random() * 500),
            itemStyle: {
              areaColor: "#7995B1",
            },
          },
          {
            name: "北京",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#55718C" },
          },
          {
            name: "天津",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#9AAFC3" },
          },
          {
            name: "上海",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#7894B0" },
          },
          {
            name: "重庆",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#7A96B1" },
          },
          {
            name: "河北",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#A0B1C7" },
          },
          {
            name: "河南",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#7995B1" },
          },
          {
            name: "云南",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#B4C2D2" },
          },
          {
            name: "辽宁",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#98ABC3" },
          },
          {
            name: "黑龙江",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#7B96B1" },
          },
          {
            name: "湖南",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#F3F5F7" },
          },
          {
            name: "安徽",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#A4B5C5" },
          },
          {
            name: "山东",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#98ADC3" },
          },
          {
            name: "江苏",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#BDC9D9" },
          },
          {
            name: "浙江",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#93A9BE" },
          },
          {
            name: "江西",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#BBC7D6" },
          },
          {
            name: "湖北",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#9DB2C7" },
          },
          {
            name: "广西",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#D1DBE5" },
          },
          {
            name: "甘肃",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#91A7BE" },
          },
          {
            name: "山西",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#ADBBCA" },
          },
          {
            name: "内蒙古",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#98ADC3" },
          },
          {
            name: "陕西",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#96ACC2" },
          },
          {
            name: "吉林",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#819AB4" },
          },
          {
            name: "福建",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#90A9C0" },
          },
          {
            name: "贵州",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#97ABC1" },
          },
          {
            name: "广东",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#EEEDEA" },
          },
          {
            name: "青海",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#8CA3BB" },
          },
          {
            name: "西藏",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#859EB8" },
          },
          {
            name: "四川",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#7B97B2" },
          },
          {
            name: "宁夏",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#B5C2D3" },
          },
          {
            name: "海南",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#ADBCCC" },
          },
          {
            name: "台湾",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#DFE0EE" },
          },
          {
            name: "香港",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#7995B1" },
          },
          {
            name: "澳门",
            value: Math.round(Math.random() * 500),
            itemStyle: { areaColor: "#7995B1" },
          },
        ],
        itemStyle: {
          //areaColor: "#BEDAEE", //默认的地图板块颜色
          borderWidth: 1,
          borderColor: "#009ce0",
        },
      },
      title: {
        text: "资源池分步",
        x: "center",
        y: 20,
      },
      tooltip: {
        trigger: "item",
      },

      //配置属性
      series: [
        {
          name: "数据",
          type: "map",
          mapType: "china",
          roam: false,
          geoIndex: 0,
          label: {
            normal: {
              show: false, //省份名称,
            },
            emphasis: {
              show: false,
            },
          },
         //data 这里的data删除了，因为设置了geoIndex之后，这里边的itemStyle就不生效了
        },
      ],
    });
    onMounted(() => {
      console.log(proxy, chart.value, mapOption.value);
      chart.value = proxy.$echarts.init(
        document.getElementById("myMap"),
        "macarons"
      );
      chart.value.setOption(mapOption.value);
      // this.chart.on("click", function(params) {
      //   //此点击事件也可以做为其他echarts图表的点击 事件
      //   alert(params.name);
      //   console.info(params);
      // });
      //鼠标移入地图不变黄色
      chart.value.on("mouseover", function() {
        chart.value.dispatchAction({
          type: "downplay",
        });
      });
    });
}
})
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容