vue玩转echarts地图

旨在记录自己项目中遇到的难题与比较好玩的功能

文档Examples - Apache ECharts

前置准备，地图的JSON数据可以去这里下载DataV.GeoAtlas地理小工具系列

直接上代码,注释很详细，可以放自己页面慢慢看，这里我使用的是浙江省和台州市的数据

小伙伴如果地图下钻需求，不需要合并数据这一项，只需要使用echarts点击事件，点击的时候改变地图渲染的json应该就可以了（博主这样猜想，但是目前没这个需求，如果空闲以后会补齐）

import zhejiang from '@/assets/yhJSON/province/zhejiang.json'
import taizhou from '@/assets/yhJSON/taizhou.json'
let option
const showLine = ref<HTMLDivElement>()
let myChart
const init = async () => {
// 数据请求
  const res = await getBTPatientDistributionAPI(params)
    myChart = echarts.init(showLine.value)
    // 合并地区数据 只显示台州的下面的区县视图
    //如果没有特殊要求这步可以跳过
    const mergedData: any = {
      ...zhejiang,
      features: [
        ...zhejiang.features,
        ...taizhou.features,
      ],
    }
   //地图挂载
    echarts.registerMap('ZJ', mergedData)
    option= {
      tooltip: {
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2,
        formatter: function (params: any) {
             //这里可以return HTML标签
          return params.value
        },
      },
      //关联地区数据颜色，对数据区分
      visualMap: {
        show: true,
        x: 'right',
        y: 'bottom',
        orient: 'vertical', // 垂直方向
        inverse: true, // 从小到大排列
        pieces: [
          { min: 100000, max: 100000000, color: '#001D70' },
          { min: 1000, max: 10000, color: '#0047A5' },
          { min: 100, max: 1000, color: '#3D76DD' },
          { min: 10, max: 100, color: '#7DAAFF' },
          { min: 0, max: 10, color: '#B8E1FF' },
        ],
      },
      series: [
        {
          name: '浙江地图',
          type: 'map',
          map: 'ZJ',
          roam: true,
          selectedMode: false, // 禁用选中模式，避免鼠标点击变色
          label: {
            show: true,
          },
          itemStyle: {
            normal: {
              // areaColor: '#323c48', // 省级地图区域背景颜色
              borderColor: '#404a59', // 省级地图区域边框颜色
            },
            emphasis: {
              areaColor: '#2a333d', // 省级地图区域高亮颜色
            },
          },
          data: [
    { name: '湖州市', mjz: 0, zy: 0, value: 0 },
    { name: '嘉兴市', mjz: 0, zy: 0, value: 0 },
    { name: '杭州市', mjz: 0, zy: 0, value: 0 },
    { name: '绍兴市', mjz: 0, zy: 0, value: 0 },
    { name: '舟山市', mjz: 0, zy: 0, value: 0 },
    { name: '衢州市', mjz: 0, zy: 0, value: 0 },
    { name: '丽水市', mjz: 0, zy: 0, value: 0 },
    { name: '金华市', mjz: 0, zy: 0, value: 0 },
    { name: '温州市', mjz: 0, zy: 0, value: 0 },
    { name: '宁波市', mjz: 0, zy: 0, value: 0 },
    { name: '台州市', mjz: 0, zy: 0, value: 0 },
    // 台州市县
    { name: '天台县', mjz: 0, zy: 0, value: 0 },
    { name: '三门县', mjz: 0, zy: 0, value: 0 },
    { name: '临海市', mjz: 0, zy: 0, value: 0 },
    { name: '仙居县', mjz: 0, zy: 0, value: 0 },
    { name: '椒江区', mjz: 0, zy: 0, value: 0 },
    { name: '路桥区', mjz: 0, zy: 0, value: 0 },
    { name: '温岭市', mjz: 0, zy: 0, value: 0 },
    { name: '玉环市', mjz: 0, zy: 0, value: 0 },
    { name: '黄岩区', mjz: 0, zy: 0, value: 0 },
  ],//地区数据如果需要自定义地区颜色只需要在数据里面加上地区背景颜色
        },
      ],
    }
    myChart.setOption(option)
  }
}