ECharts|单独图表组件的开发 --- 商家分布模块（地图+散点图） echarts|vue|html

目录
效果预览

通用代码结构和流程
显示地图
获取中国地区的矢量数据（数据在之前导入的static文件夹中）
注册地图数据
配置geo
显示散点图
获取数据：/api/map
处理数据：散点数据、图例数据
图表的设置：配置series(type为effectScatter、coordinateSystem为geo)
UI调整
主题的使用：init方法的第二个参数
标题的显示：title
地图位置和颜色：geo、geo.itemStyle
图例的位置和方向：legend
涟漪效果：rippleEffect:scale、rippleEffect.brushType
分辨率适配
screenAdapter（标题文字大小、图例大小）
地图点击事件
点击事件的监听：this.chartInstance.on('click', ()=>{})
获取所点击省份的矢量地图数据：需要有省份拼音的对照数据、得到点击省份地图数据的路径
显示省份：注册地图数据、配置geo
回到中国地图：配置geo、map:'china'
将地图数据缓存
单击地图省份，能得到该省份的地图，双击屏幕，能够回到中国地图
当点击同一个省份多次，为了防止多次请求，每次请求之后，就将该省份的数据存到这个mapData对象中，下次请求的时候，先判断一下mapData中有没有自己想要的数据。
【ECharts|单独图表组件的开发 --- 商家分布模块（地图+散点图）】components/Map.vue

views/MapPage.vue

router/index.js

import Vue from 'vue' import VueRouter from 'vue-router' import SellerPage from '../views/SellerPage' import TrendPage from '../views/TrendPage' import MapPage from '../views/MapPage'Vue.use(VueRouter)const routes = [ { path: '/sellerpage', component: SellerPage }, { path: '/trendpage', component: TrendPage }, { path: '/mappage', component: MapPage } ]const router = new VueRouter({ routes })export default router

util/map_utils.js
封装了一个方法：将省份的中文名转换成拼音

const name2pinyin = { 安徽: 'anhui', 陕西: 'shanxi1', 澳门: 'aomen', 北京: 'beijing', 重庆: 'chongqing', 福建: 'fujian', 甘肃: 'gansu', 广东: 'guangdong', 广西: 'guangxi', 贵州: 'guizhou', 海南: 'hainan', 河北: 'hebei', 黑龙江: 'heilongjiang', 河南: 'henan', 湖北: 'hubei', 湖南: 'hunan', 江苏: 'jiangsu', 江西: 'jiangxi', 吉林: 'jilin', 辽宁: 'liaoning', 内蒙古: 'neimenggu', 宁夏: 'ningxia', 青海: 'qinghai', 山东: 'shandong', 上海: 'shanghai', 山西: 'shanxi', 四川: 'sichuan', 台湾: 'taiwan', 天津: 'tianjin', 香港: 'xianggang', 新疆: 'xinjiang', 西藏: 'xizang', 云南: 'yunnan', 浙江: 'zhejiang' }export function getProvinceMapInfo (arg) { const path = `/static/map/province/${name2pinyin[arg]}.json` return { key: name2pinyin[arg], path: path } }