vue3 script setup HighCharts地图应用

安装

npm install --save highcharts

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

<script setup>
  import shandong from './shandong.json'; // json数据http://datav.aliyun.com/portal/school/atlas/area_selector
  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>