vue+echarts实现简单中国地图

下面我将介绍如何使用Vue和ECharts来创建一个自定义的中国地图轮廓可视化。

1. 安装必要的依赖

	npm install echarts vue-echarts

2. 获取地图json

https://datav.aliyun.com/portal/school/atlas/area_selector

import chinaJson from '../data/mapJson/China.json'

3. 创建基础地图组件

<template>
  <div class="container">
    <div ref="chartContainer" class="china-map-container"></div>
  </div>
</template>

<style>
.china-map-container {
  width: 100%;
  height: 600px;
}
</style>

echarts配置相关数据

// 注册中国地图数据
      echarts.registerMap('china', chinaJson);
      // 初始化图表
      const chart = echarts.init(this.$refs.chartContainer);
      // 配置项
      const option = {
        //标题配置
        title: {
          text: '中国地图',          // 主标题文本
          subtext: '数据仅供参考',   // 副标题文本
          left: 'center',           // 水平位置 (left|center|right|百分比|像素值)
          top: 'top',               // 垂直位置 (top|middle|bottom|百分比|像素值)
          textStyle: {              // 标题文本样式
            color: '#333',          // 文字颜色
            fontSize: 18,           // 字体大小
            fontWeight: 'bold',     // 字体粗细
            fontFamily: 'Arial'     // 字体类型
          },
          subtextStyle: {           // 副标题样式
            color: '#666',
            fontSize: 12
          }
        },
        // 提示框配置
        tooltip: {
          trigger: 'item',          // 触发类型 (item|axis)
          formatter: '{b}',    // 格式化显示内容
          // {a}系列名, {b}区域名, {c}数值
          backgroundColor: 'rgba(0,0,0,0.7)',  // 背景色
          borderColor: '#333',      // 边框颜色
          borderWidth: 1,           // 边框宽度
          textStyle: {              // 文本样式
            color: '#fff',
            fontSize: 12
          },
          padding: [8, 12],         // 内边距
          extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);' // 额外CSS样式
        },
        // 视觉映射组件
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          inRange: {
            color: ['#e0f7fa', '#009688']
          }
        },
        // 地图系列配置
        series: [{
          name: '中国地图',         // 系列名称
          type: 'map',             // 图表类型
          map: 'china',            // 地图类型 (需提前registerMap)
          roam: false,              // 是否开启缩放和平移
          scaleLimit: {            // 缩放限制
            min: 1,                // 最小缩放级别
            max: 5                 // 最大缩放级别
          },
          zoom: 1.5,               // 初始缩放级别
          center: [105, 36],       // 初始中心点坐标 [经度, 纬度]

      // 标签配置
      label: {
        show: true,            // 是否显示标签
        position: 'inside',    // 位置 (inside|top|bottom|left|right)
        color: '#333',        // 文字颜色
        fontSize: 8,         // 字体大小
        fontWeight: 'normal', // 字体粗细
        formatter: '{b}'      // 标签内容格式
      },

      // 区域样式
      itemStyle: {
        areaColor: 'rgba(193, 225, 193, 0.5)',  // 区域填充色
        borderColor: '#009688', // 边界线颜色
        borderWidth: 1,        // 边界线宽度
        borderType: 'solid',   // 边界线类型 (solid|dashed|dotted)
        shadowColor: 'rgba(0, 0, 0, 0.1)', // 阴影颜色
        shadowBlur: 2,        // 阴影模糊大小
        shadowOffsetX: 0,      // 阴影水平偏移
        shadowOffsetY: 0       // 阴影垂直偏移
      },

      // 高亮状态样式
      emphasis: {
        label: {               // 高亮时标签样式
          show: true,
          color: '#fff',
          fontSize: 10
        },
        itemStyle: {          // 高亮时区域样式
          areaColor: '#4db6ac',
          borderWidth: 1
        }
      },

      // 选中状态样式
      select: {
        label: {
          show: true,
          color: '#fff'
        },
        itemStyle: {
          areaColor: '#2E8B57'
        }
      },

      // 数据内容 (可选)
      data: [
        {name: '北京', value: 100},
        {name: '上海', value: 80},
        // 其他省份数据...
      ]
    }]
  }
  chart.setOption(option);