HighCharts地图应用：vue3 script setup

安装

npm install --save highcharts

版本

效果预览

 使用（局部引入） 

此处以山东省的地图为例：

•  html

<template>
  <div class="w-660px h-660px" ref="mapChartRef"></div>
</template>

ps：此处样式是通过 Windi CSS 生成，有兴趣的同学可以学习一下，很好用的哦😀

• js

        1、依赖项引入

  import shandong from './shandong.json'; // json数据中包含了绘制地图所需要基础数据,下面会提供地图数据的获取链接
  import HighCharts from 'highcharts';
  import useMapCharts from 'highcharts/modules/map'; // 引入地图模块
  useMapCharts(HighCharts); // 将地图插件挂载到highcharts中

        2、 定义模拟数据和地图配置

  // 模拟数据
  const citydata = ref([
    { name: '济南', value: 20, color: 'rgba(163, 178, 231, 1)' },
    { name: '青岛', value: 18, color: 'rgba(163, 178, 231, 0.9)' },
    { name: '潍坊', value: 16, color: 'rgba(163, 178, 231, 0.8)' },
    { name: '临沂', value: 14, color: 'rgba(163, 178, 231, 0.7)' },
    { name: '济宁', value: 12, color: 'rgba(163, 178, 231, 0.6)' },
    { name: '烟台', value: 10, color: 'rgba(163, 178, 231, 0.5)' },
    { name: '淄博', value: 8, color: 'rgba(163, 178, 231, 0.4)' },
    { name: '泰安', value: 6, color: 'rgba(163, 178, 231, 0.3)' },
    { name: '菏泽', value: 4, color: 'rgba(163, 178, 231, 0.2)' },
    { name: '德州', value: 2, color: 'rgba(163, 178, 231, 0.1)' },
    { name: '东营', value: 0, color: 'rgba(163, 178, 231, 0)' },
    { name: '聊城', value: 1, color: 'rgba(163, 178, 231, 0.05)' },
    { name: '滨州', value: 3, color: 'rgba(163, 178, 231, 0.15)' },
    { name: '威海', value: 5, color: 'rgba(163, 178, 231, 0.25)' },
    { name: '莱芜', value: 7, color: 'rgba(163, 178, 231, 0.35)' },
    { name: '枣庄', value: 9, color: 'rgba(163, 178, 231, 0.45)' },
    { name: '日照', value: 11, color: 'rgba(163, 178, 231, 0.55)' },
  ]);

  // 图标配置
  const chartOptions = ref({
    chart: {
      type: 'map', // 图表的类型设置为 地图
      backgroundColor: 'rgba(0,255,0,0)', // 设置地图的背景为透明
    },
    title: {
      text: null, // 通过将text设置为null隐藏标题
    },
    credits: { enabled: false }, // 关闭版权信息
    legend: {
      enabled: false,
    },
    tooltip: {
      formatter: function () {
        // 鼠标悬浮的提示内容，point包含了模拟数据中的单项数据,series会指向当前图表
        return this.series.name + this.point.name + '市的数据是' + this.point.value;
      },
    },
    series: [
      {
        name: '山东省',
        color: 'rgba(163, 178, 231, 0.15)', // 如果data数据中没有color，会默认使用该值填充
        data: [],
        mapData: shandong, // 地图数据，使用上面引入的json数据
        joinBy: 'name', // data和maoData的关联key使用 "name"
        states: {
          hover: {
            color: '#507AFF', // 鼠标hover上去后更改填充色
          },
        },
        animation: {
          duration: 1000,
        },
        dataLabels: { // 地图上显示的label以及设置
          enabled: true,
          color: 'black',
          format: '{point.name}市',
          style: {
            fontSize: '10px',
          },
        },
      },
    ],
  });

        3、地图初始化

  onMounted(() => {
    chartOptions.value.series[0].data = citydata.value;
    mapChart.value = HighCharts.mapChart(mapChartRef.value, chartOptions.value, () => {
      emit('rendered', true);
    });
  });

        4、所有代码 

<script setup>
  import shandong from './shandong.json'; // json数据中包含了绘制地图所需要基础数据,下面会提供地图数据的获取链接
  import HighCharts from 'highcharts';
  import useMapCharts from 'highcharts/modules/map'; // 引入地图模块
  useMapCharts(HighCharts); // 将地图插件挂载到highcharts中
  import { onMounted, ref, defineEmits } from 'vue';

  // 模拟数据
  const citydata = ref([
    { name: '济南', value: 20, color: 'rgba(163, 178, 231, 1)' },
    { name: '青岛', value: 18, color: 'rgba(163, 178, 231, 0.9)' },
    { name: '潍坊', value: 16, color: 'rgba(163, 178, 231, 0.8)' },
    { name: '临沂', value: 14, color: 'rgba(163, 178, 231, 0.7)' },
    { name: '济宁', value: 12, color: 'rgba(163, 178, 231, 0.6)' },
    { name: '烟台', value: 10, color: 'rgba(163, 178, 231, 0.5)' },
    { name: '淄博', value: 8, color: 'rgba(163, 178, 231, 0.4)' },
    { name: '泰安', value: 6, color: 'rgba(163, 178, 231, 0.3)' },
    { name: '菏泽', value: 4, color: 'rgba(163, 178, 231, 0.2)' },
    { name: '德州', value: 2, color: 'rgba(163, 178, 231, 0.1)' },
    { name: '东营', value: 0, color: 'rgba(163, 178, 231, 0)' },
    { name: '聊城', value: 1, color: 'rgba(163, 178, 231, 0.05)' },
    { name: '滨州', value: 3, color: 'rgba(163, 178, 231, 0.15)' },
    { name: '威海', value: 5, color: 'rgba(163, 178, 231, 0.25)' },
    { name: '莱芜', value: 7, color: 'rgba(163, 178, 231, 0.35)' },
    { name: '枣庄', value: 9, color: 'rgba(163, 178, 231, 0.45)' },
    { name: '日照', value: 11, color: 'rgba(163, 178, 231, 0.55)' },
  ]);

  // 图标配置
  const chartOptions = ref({
    chart: {
      type: 'map', // 图表的类型设置为 地图
      backgroundColor: 'rgba(0,255,0,0)', // 设置地图的背景为透明
    },
    title: {
      text: null, // 通过将text设置为null隐藏标题
    },
    credits: { enabled: false }, // 关闭版权信息
    legend: {
      enabled: false,
    },
    tooltip: {
      formatter: function () {
        // 鼠标悬浮的提示内容，point包含了模拟数据中的单项数据,series会指向当前图表
        return this.series.name + this.point.name + '市的数据是' + this.point.value;
      },
    },
    series: [
      {
        name: '山东省',
        color: 'rgba(163, 178, 231, 0.15)', // 如果data数据中没有color，会默认使用该值填充
        data: [],
        mapData: shandong, // 地图数据，使用上面引入的json数据
        joinBy: 'name', // data和maoData的关联key使用 "name"
        states: {
          hover: {
            color: '#507AFF', // 鼠标hover上去后更改填充色
          },
        },
        animation: {
          duration: 1000,
        },
        dataLabels: { // 地图上显示的label以及设置
          enabled: true,
          color: 'black',
          format: '{point.name}市',
          style: {
            fontSize: '10px',
          },
        },
      },
    ],
  });

  const emit = defineEmits(['rendered', 'updated', 'added', 'removed']);

  const mapChart = ref(null);
  const mapChartRef = ref(null); // vue2中可以直接使用 $refs.mapChartRef,vue3中需要定义，名称需要对应html标签上的ref名称

  onMounted(() => {
    chartOptions.value.series[0].data = citydata.value;
    mapChart.value = HighCharts.mapChart(mapChartRef.value, chartOptions.value, () => {
      emit('rendered', true);
    });
  });

  // 通过更新配置，更新视图
  const chartUpdate = (options) => {
    if (!mapChart.value) {
      return;
    }
    mapChart.value.update(options);
    emit('updated', true);
  };

  // 添加一组新的视图series
  const addSeries = (series) => {
    if (!mapChart.value) {
      return;
    }
    mapChart.value.addSeries(series);
    emit('added', true);
  };

  // 移除charts中的一组series
  const removeSeries = (index) => {
    if (!mapChart.value) {
      return;
    }
    mapChart.value.series[index].remove(true);
    emit('removed', true);
  };
</script>

 ps：地图数据生成，highcharts 官方也在使用的地图数据，乡镇级数据会收费，白嫖党建议使用 阿里提供的地图数据，已测试可以兼容 highcharts map 使用且数据可免费使用

拓展

higncharts variablepie：可变宽度的环形图，在使用中如果出现 missingModuleFor: variablepie 的提示，不妨也模仿以上示例，向 highcharts 挂载拓展图形

  import HighCharts from 'highcharts';
  import VariablePie from 'highcharts/modules/variable-pie';
  VariablePie(HighCharts);

结语

以上是我在借鉴官方的文档总结出来，如果有描述不到位的地方还请看官们指正，感谢。