echarts初始化中国地图
vue 中可以直接使用，修改文件地址即可
更多echarts例子
1./#/
2./#/homepage
npm下载echarts
npm install echarts -S
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>echarts 中国地图</title><style>#main {width: 600px;height: 400px;background-color: bisque;margin: 0 auto;}</style></head><body><div id="main"></div><script src="/ajax/libs/echarts/5.3.1/echarts.min.js"></script><!--china.json下载地址<script src="https://geo./areas_v3/bound/100000_full.json"></script>--><script src="./index.js"></script></body></html>
class Index {mapData = []geoCoordMap = {}constructor() {// 测试数据let data = [{name: '天津市',value: 32840},{name: '新疆维吾尔自治区',value: 31680},{name: '甘肃省',value: 24750},{name: '广西壮族自治区',value: 15485},{name: '湖南省',value: 24750}]data.forEach((item) => {item.itemStyle = {areaColor: this.filterAreaColor(item.value)}})this.mapData = data}getJSON() {// js请求本地json文件/*注意：xml请求本地json文件可能会引发跨域问题解决方法：1.安装 live-serve 插件，用服务启动2.使用jsonp请求回调*/return new Promise((resolve, reject) => {let request = new XMLHttpRequest()// 这里的json文件前往：https://geo./areas_v3/bound/100000_full.json 下载request.open('get', 'china.json文件地址')request.send(null)request.onload = () => {resolve(JSON.parse(request.responseText))}})}initMapEcharts(dom) {this.getJSON().then((china) => {// 核心区域// 修改初始化china.json的name问题china.features.forEach((n) => {n.properties.name = n.properties.fullname})let myChart = echarts.init(dom)// 设置 map 的缩放大小let geoSeries = {map: 'china',aspectScale: 1,zoom: 1.2}echarts.registerMap(geoSeries.map, china)// 获取当前china.json中的地区经纬度let mapFeatures = echarts.getMap(geoSeries.map).geoJson.featuresmapFeatures.forEach((v) => {// 地区名称let name = v.properties.fullname// 地区经纬度this.geoCoordMap[name] = v.properties.cp})let options = {tooltip: {trigger: 'item',padding: 0,backgroundColor: 'transparent',borderWidth: 0,formatter: (params) => {let html = `<div οnclick="handleAreaDetail('${params.data ? params.data.areaCode : ''}')" style="width: fit-content;background: #fff;font-size: 13px;color: #444444;padding: 9px 6px;border-radius: 4px;display: flex;justify-content: flex-start;position: relative;"><div><div>地区：${params.name}</div><div>总业绩：${isNaN(params.value) ? 0 : params.value + '元'}</div></div></div>`return html},axisPointer: {lineStyle: {color: '#fff'}},triggerOn: 'click',enterable: true},geo: {show: true,...geoSeries,regions: [{name: '南海诸岛',itemStyle: {// 透明化右下角的南海诸岛opacity: 0 // 为 0 时不绘制该图形,},label: {show: false // 隐藏文字}}],itemStyle: {areaColor: '#dce5fb',borderWidth: 4,borderColor: '#5F71FF'}},series: [{type: 'map',label: {show: false},...geoSeries,itemStyle: {areaColor: '#dce5fb',borderColor: '#eaeffc',borderWidth: 1},// 点击选中之后的高亮颜色select: {// 地图选中区域样式label: {// 选中区域的label(文字)样式// color: '#fff',show: false},itemStyle: {// 选中区域的默认样式areaColor: '#9a9afe'}},data: this.mapData},{type: 'effectScatter',coordinateSystem: 'geo',data: this.convertData(this.mapData),symbolSize: 10,showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},emphasis: {scale: true},label: {formatter: '{b}',position: 'right',show: true,fontSize: 8,backgroundColor: 'transparent'},itemStyle: {color: '#7c8cfe',shadowBlur: 10,shadowColor: '#7c8cfe'},zlevel: 1}]}options && myChart.setOption(options)})}// 根据不同的数值，区域显示不同的初始化颜色filterAreaColor(total) {if (total < 45) {return '#cdccff'} else if (total >= 1000 && total <= 2000) {return '#b8b7ff'} else {return '#999afe'}}convertData(data) {let res = []for (let i = 0; i < data.length; i++) {let geoCoord = this.geoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)})}}return res}}let index = new Index()index.initMapEcharts(document.getElementById('main'))
如果觉得《echarts初始化中国地图（Map）》对你有帮助，请点赞、收藏，并留下你的观点哦！
