目录
效果
Geojson
Echart
VUE
效果
Geojson
首先去这个网站下载需要展示的map，（全国/省/市），（点击省能进入市）
/portal/school/atlas/area_selector
下载右侧的json文件
Echart
我用的是这种效果的地图/examples/zh/editor.html?c=map-HK
VUE
将下载好后的json文件扔进项目
以下内容直接粘贴全部代码
<template><div class="echart" id="chart1" ref="chart1" :style="{width: '100%', height: '1230px', background_color: '#fff'}"></div></template><script>const echarts = require('echarts')import jsonData from '../../../assets/json/zg.json' //引入josn文件export default {name: 'AreaEchart',data() {return {option: {title: {text: '中华人民共和国地图' // 标题},visualMap: { // 左下角选峰值的小插件min: 800,max: 50000,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},tooltip: { // 鼠标放在省块上展示数据trigger: 'item',formatter: '{b}<br/>{c} (数)'},series: [ // 地图参数{name: 'zg', // 对应json文件名type: 'map',map: 'zg', // 对应json文件名label: {show: true},data: [{ name: '青海省', value: 7.34 },{ name: '辽宁省', value: 15477.48 },{ name: '黑龙江省', value: 31686.1 },{ name: '吉林省', value: 6992.6 },{ name: '河北省', value: 44045.49 },{ name: '河南省', value: 40689.64 },{ name: '山东省', value: 37659.78 },{ name: '陕西省', value: 45180.97 },{ name: '山西省', value: 55204.26 },{ name: '江苏省', value: 21900.9 },{ name: '浙江省', value: 4918.26 },{ name: '福建省', value: 5881.84 },{ name: '广东省', value: 4178.01 },{ name: '海南省', value: 2227.92 },{ name: '云南省', value: 2180.98 },{ name: '江西省', value: 9172.94 },{ name: '湖南省', value: 3368 },{ name: '湖北省', value: 806.98 }]// 自定义名称映射// nameMap: {// 'Central and Western': '中西区',// 'Eastern': '东区',// 'Islands': '离岛',// 'Kowloon City': '九龙城',// 'Kwai Tsing': '葵青',// 'Kwun Tong': '观塘',// 'North': '北区',// 'Sai Kung': '西贡',// 'Sha Tin': '沙田',// 'Sham Shui Po': '深水埗',// 'Southern': '南区',// 'Tai Po': '大埔',// 'Tsuen Wan': '荃湾',// 'Tuen Mun': '屯门',// 'Wan Chai': '湾仔',// 'Wong Tai Sin': '黄大仙',// 'Yau Tsim Mong': '油尖旺',// 'Yuen Long': '元朗'// }}]}}},methods: {getData(value) {this.initChart()},initChart() {echarts.registerMap('zg', jsonData)const getchart = echarts.init(this.$refs.chart1)getchart.setOption(this.option)window.onresize = () => {getchart.resize()}}}}</script>
