echarts初始化中国地图（Map）

echarts初始化中国地图

vue 中可以直接使用，修改文件地址即可

更多echarts例子
1.http://www.ppchart.com/#/
2.https://www.isqqw.com/#/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="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script><!--china.json下载地址<script src="https://geo.datav.aliyun.com/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.datav.aliyun.com/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）相关推荐

vue 引入echarts画中国地图 Map china not exists
现象:在vue里用echarts画地图时报错:Map china not exists. 只出现了南海诸岛部分原因:没引入地图数据解决: import 'echarts/map/js/china. ...
Echarts关于中国地图的china.js文件下载
原文出处:https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时,需要用到china.j ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
echarts的中国地图，点击进入省级地图，按需加载对应的省js，可返回中国地图
这是我项目中用到的示例图: 原理:创建两个省份的数组,在点击某个省份的时候,遍历获取对应省份的数据js,并加载此数据js,同时重新初始化echarts渲染此省份的数据效果 1.省份数组,用于遍历获取对 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
echarts实现中国地图(Vue)
效果如下 1,安装echarts npm install echarts --save 2,引入 import echarts from "echarts"; import 'ec ...
echarts：中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...

echarts初始化中国地图（Map）

echarts初始化中国地图

完整代码

echarts初始化中国地图（Map）相关推荐

最新文章

热门文章