Echarts实现中国地图、省市地区地图
2024-05-09 17:17:08
中国地图
山西地图
天津地图（实现3D立体效果）
地图赋值
initMapChart() {let mapData = [{name: '北京',value: this.randomData()}, {name: '天津',value: this.randomData()}, {name: '上海',value: this.randomData()}, {name: '重庆',value: this.randomData()}, {name: '河北',value: this.randomData()}, {name: '河南',value: this.randomData()}, {name: '云南',value: this.randomData()}, {name: '辽宁',value: this.randomData()}, {name: '黑龙江',value: this.randomData()}, {name: '湖南',value: this.randomData()}, {name: '安徽',value: this.randomData()}, {name: '山东',value: this.randomData()}, {name: '新疆',value: this.randomData()}, {name: '江苏',value: this.randomData()}, {name: '浙江',value: this.randomData()}, {name: '江西',value: this.randomData()}, {name: '湖北',value: this.randomData()}, {name: '广西',value: this.randomData()}, {name: '甘肃',value: this.randomData()}, {name: '山西',value: this.randomData()}, {name: '内蒙古',value: this.randomData()}, {name: '陕西',value: this.randomData()}, {name: '吉林',value: this.randomData()}, {name: '福建',value: this.randomData()}, {name: '贵州',value: this.randomData()}, {name: '广东',value: this.randomData()}, {name: '青海',value: this.randomData()}, {name: '西藏',value: this.randomData()}, {name: '四川',value: this.randomData()}, {name: '宁夏',value: this.randomData()}, {name: '海南',value: this.randomData()}, {name: '台湾',value: this.randomData()}, {name: '香港',value: this.randomData()}, {name: '澳门',value: this.randomData()}, {name: '南海诸岛',value: this.randomData()}];basicMapChart(this.$Echarts.init(document.getElementById('map1')), mapData);let provinceData1 = [{name: '大同市',value: this.randomData()}, {name: '朔州市',value: this.randomData()}, {name: '忻州市',value: this.randomData()}, {name: '吕梁市',value: this.randomData()}, {name: '太原市',value: this.randomData()}, {name: '阳泉市',value: this.randomData()}, {name: '晋中市',value: this.randomData()}, {name: '临汾市',value: this.randomData()}, {name: '长治市',value: this.randomData()}, {name: '晋城市',value: this.randomData()}, {name: '运城市',value: this.randomData()}];sxMapChart(this.$Echarts.init(document.getElementById('map2')), provinceData1);let provinceData2 = [{name: '蓟州区',value: this.randomData()}, {name: '宝坻区',value: this.randomData()}, {name: '武清区',value: this.randomData()}, {name: '宁河区',value: this.randomData()}, {name: '北辰区',value: this.randomData()}, {name: '西青区',value: this.randomData()}, {name: '东丽区',value: this.randomData()}, {name: '滨海新区',value: this.randomData()}, {name: '静海区',value: this.randomData()}, {name: '津南区',value: this.randomData()}, {name: '河北区',value: this.randomData()}, {name: '河东区',value: this.randomData()}, {name: '河西区',value: this.randomData()}, {name: '南开区',value: this.randomData()}, {name: '和平区',value: this.randomData()}, {name: '红桥区',value: this.randomData()}];this.mapChart = this.$Echarts.init(document.getElementById('map3'));tjMapChart(this.mapChart, provinceData2);let shadowChart = this.$Echarts.init(document.getElementById('shadowMap'));shadowMapChart(shadowChart);// 地图阴影效果
},
randomData() {return Math.round(Math.random() * 100);
}
import 'echarts/map/js/china';// 引入插件自带地图js-中国地图数据
import 'echarts/map/js/province/shanxi';// 引入插件自带地图js-山西地图数据
import 'echarts/map/js/province/tianjin';// 引入插件自带地图js-天津地图数据
let colorArr = ['#EFED1E', '#01F408', '#EE3A3B', '#4ADBEC', '#0FEEFB'];/*** 基础地图* @param chart：echart容器* chartData： 图表数据*/
export function basicMapChart(chart, chartData) {let option = {tooltip: {formatter: function(e) {var name = e.name ? e.name : '获取中';var value = e.value ? e.value : '暂无数据'return name + "：" + value;}},visualMap: {min: 0,max: 100,left: '20%',bottom: 20,text: ['高', '低'],calculable: true,textStyle: {color: '#fff'},inRange: {color: ['rgba(77,152,225,.7)', 'rgba(6,65,160,.9)']}},geo: {map: 'china',roam: false,zoom: 1.1,label: {emphasis: {show: false}},itemStyle: {borderColor: 'transparent',areaColor: 'transparent'}},series: [{type: 'map',map: 'china',zoom: 1.1,itemStyle: {borderWidth: 1,borderColor: 'rgba(255,255,255,.3)',emphasis: {borderColor: '#40C9EA',shadowColor: 'rgba(3,221,255,0.4)',shadowBlur: 15,label: {color: '#fff'},areaColor: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#0F58BF'}, {offset: 1,color: '#084095'}],},}},data: chartData}]};chart.setOption(option);
}/*** 山西地图* @param chart：echart容器* chartData： 图表数据*/
export function sxMapChart(chart, chartData, flag) {let option = {tooltip: {formatter: function(e) {var name = e.name ? e.name : '获取中';var value = e.value ? e.value : '暂无数据'return name + "：" + value;}},visualMap: {show: false,min: 0,max: 100,inRange: {color: ['#0388FF', '#053859']}},geo: {map: '山西',roam: false,zoom: 1.2,aspectScale: 0.9,label: {emphasis: {show: false}},itemStyle: {borderColor: 'transparent',areaColor: 'transparent'}},series: [{type: 'map',map: '山西',zoom: 1.2,aspectScale: 0.9,label: {show: true,color: '#fff',},itemStyle: {borderWidth: 2,borderColor: '#05B8F8',emphasis: {borderColor: '#5EBADB',label: {color: '#fff'},areaColor: '#B4917F'}},data: chartData}, {type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 2,rippleEffect: {period: 15,scale: 4,brushType: 'fill'},hoverAnimation: true,label: {normal: {show: false},},itemStyle: {normal: {color: (param) => {return colorArr[param.dataIndex];},shadowBlur: 10,shadowColor: '#333'}},symbolSize: 12,data: [{name: 'a',visualMap: false,value: [112.42227451275963, 39.47420453623572],}, {name: 'b',visualMap: false,value: [111.106869792807, 38.43977743019218]}, {name: 'c',visualMap: false,value: [110.82052318710302, 38.02144293877752]}, {name: 'd',visualMap: false,value: [111.035283141381, 37.45859289578324]}, {name: 'e',visualMap: false,value: [112.46701616990087, 37.91495779550833]}]}]};chart.setOption(option);// 图表点击事件chart.on('click', function (param) {// 地图当前点击经纬度console.log(chart.convertFromPixel('geo', [param.event.offsetX, param.event.offsetY]));});
}/*** 天津地图* @param chart：echart容器* chartData： 图表数据*/
export function tjMapChart(chart, chartData) {let option = {tooltip: {formatter: function(e) {var name = e.name ? e.name : '获取中';var value = e.value ? e.value : '暂无数据'return name + "：" + value;}},geo: {// 底层地图map: '天津',roam: false,aspectScale: 0.85,layoutCenter: ["46%", "52%"],layoutSize: '80.5%',label: {emphasis: {show: false}},itemStyle: {borderWidth: 4,shadowColor: 'red',borderColor: '#00f6fb',areaColor: 'transparent',}},series: [{// 顶层地图type: 'map',map: '天津',roam: false,aspectScale: 0.85,layoutCenter: ["46%", "52%"],layoutSize: '80%',label: {show: true,color: '#fff',formatter: function(param) {return '{a|' + param.name + '}';},rich: {a: {height: 0,fontSize: 16,padding: [6,5,0,5],backgroundColor: 'rgba(0,243,248,.7)',}}},itemStyle: {borderWidth: 1,borderColor: '#7dcdff',areaColor: '#0071c0',emphasis: {borderColor: '#7dcdff',label: {color: '#fff'},}},data: chartData},
// {// type: 'scatter',
// coordinateSystem: 'geo',
// symbol: 'pin',
// symbolSize: [50,50],
// showEffectOn: 'render',
// zlevel: 2,
// hoverAnimation: true,
// rippleEffect: {// brushType: 'stroke'
// },
// label: {// normal: {// show: true,
// textStyle: {// color: '#fff',
// fontSize: 9,
// },
// formatter (value){// return 100;
// }
// },
// },
// itemStyle: {// normal: {// color: '#01F408',
// shadowBlur: 10,
// shadowColor: '#333'
// }
// },
// data: [{// name: 'a',
// visualMap: false,
// value: [117.43499282770108, 39.52057432893366],
// }, {// name: 'b',
// visualMap: false,
// value: [117.57121546620637, 39.31794316585672]
// }, {// name: 'c',
// visualMap: false,
// value: [116.98470132819752, 38.85156985401295]
// }]
// }]};chart.setOption(option);// 图表点击事件chart.on('click', function (param) {// 地图当前点击经纬度console.log(chart.convertFromPixel('geo', [param.event.offsetX, param.event.offsetY]));});
}export function shadowMapChart(chart) {let option = {geo: {// 底层地图map: '天津',roam: false,aspectScale: 0.85,layoutCenter: ["46%", "53.5%"],layoutSize: '80.5%',label: {show: false},itemStyle: {borderColor: 'transparent',areaColor: 'rgba(0,156,255,.3)',}},series: [{// 顶层地图type: 'map',map: '天津',roam: false,aspectScale: 0.85,layoutCenter: ["46%", "55%"],layoutSize: '80.5%',label: {show: false,},itemStyle: {borderColor: 'transparent',areaColor: 'rgba(0,156,255,.1)',emphasis: {show: false}},}]};chart.setOption(option);
}
Echarts实现中国地图、省市地区地图相关推荐
- 中国各省市json地图，包括雄安
中国各省市json地图,包括雄安 河北省已新增雄安轮廓,新增雄安地区.用于echarts地图可视化 链接:https://pan.baidu.com/s/1z5T8Rag32GPtU3hjAuLbnA ...
- html css省市区,利用echarts实现全国热点活跃地区地图代码
特效描述:利用echarts实现 全国热点 活跃地区 地图代码.利用echarts实现全国热点活跃地区地图代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 // 路径配置 re ...
- echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）
前言:最近公司项目有个需求,展示河南省各省市区县的地图,并展示相应的数据,看了些资料决定用echarts实现. 一.完成之后的效果图 点击市的模块显示对应的市,并显示对应市的数据 点击区县的模块显示对 ...
- Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换 首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
- mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
- echarts实现中国地图和各省市地图
echarts实现中国地图 我会把china.js和各省市的js以及json上传资源,有需要的可以下载 首先引入echarts.js和china.js <!DOCTYPE html> &l ...
- 使用echarts完成中国省市区县镇地图展示
目录 前言 一.中国地图 1.1 地图数据-china.js 1.2 代码应用 二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用 三.市级地图--以 ...
- html5 svg中国地图map悬停显示省市地区代码
html5 svg中国地图map悬停显示省市地区代码 html5 svg中国地图map悬https://www.51qianduan.com/article/4401.html停显示省市地区代码
- vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
最新文章
- Visual C++ 对话框增加菜单栏
- 帖子删除显示帖子名称？
- 数据中心分解实验四--PC和VPC
- 让Jexus支持高并发请求的优化技巧
- ios:ScrollView联动效果
- 居然之家：核心业务系统全面上云，采用PolarDB替代传统商业数据库
- android调用系统相册打开图片不显示,【报Bug】打开相册，不显示图片，选中图片后，app会崩溃...
- 用asp.net core结合fastdfs打造分布式文件存储系统
- python交互式编程客户端_【python】UDP网络编程：实现服务端与客户端的交互、简单的AI智能模式...
- Grafana 使用教程 --- 开源的度量分析与可视化套件
- 山东省计算机春季高考大纲,2017年山东春季高考专业知识考试大纲.doc
- python manage.py syncdb Unknown command: 'syncdb'问题解决方法
- 基于粒子群优化算法的函数寻优算法
- 微信小程序发布流程（上传审核）
- 统计学与概率论的区别
- 跳转微信公众号首页方式
- 计算机视觉三角测量公式,摄影测量(计算机视觉)中的三角化方法
- 解决excel里面“取消隐藏”是灰色的问题
- 十大管理之项目干系人管理知识点
- 开发公链需要多少钱 开发公链区块链的搭建费用