echarts 中国地图加自定义图标

导入js

 <script src="/ajax/libs/report/echarts/echarts-all.js"></script>

插入div

<div class="ibox-content "><div class="map" style="height: 680px;" id="echarts-map-chart"></div>
</div>

3.配置js

<script type="text/javascript">var data = [ //地图上展示的数据和内容{name: '北京',value: 1,}, {name : '河北',value : 2,}, {name : '天津',value : 1}, {name : '重庆',value : 2} ];var geoCoordMap = { //定义自定义图标放置的位置'新疆': [86.61 , 40.79],'西藏':[89.13 , 30.66],'黑龙江':[128.34 , 47.05],'吉林':[126.32 , 43.38],'辽宁':[123.42 , 41.29],'内蒙古':[112.17 , 42.81],'北京':[116.60 , 40.40 ],'宁夏':[106.27 , 36.76],'山西':[111.95,37.65],'河北':[115.21 , 38.44],'天津':[117.64 , 39.52],'青海':[97.07 , 35.62],'甘肃':[103.82 , 36.05],'山东':[118.01 , 36.37],'陕西':[108.94 , 34.46],'河南':[113.46 , 34.25],'安徽':[117.28 , 31.86],'江苏':[120.26 , 32.54],'上海':[121.46 , 31.28],'四川':[103.36 , 30.65],'湖北':[112.29 , 30.98],'浙江':[120.15 , 29.28],'重庆':[107.51 , 29.63],'湖南':[112.08 , 27.79],'江西':[115.89 , 27.97],'贵州':[106.91 , 26.67],'福建':[118.31 , 26.07],'云南':[101.71 , 24.84],'台湾':[121.01 , 23.54],'广西':[108.67 , 23.68],'广东':[113.98 , 22.82],'海南':[110.03 , 19.33],'澳门':[113.54 , 22.19],'香港':[114.17 , 22.32],};var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};var mapChart = echarts.init(document.getElementById("echarts-map-chart"));var mapoption = {title : {show : true,// 是否显示//text : '工程分布',x : 'center',y : 'top',},tooltip : {trigger : 'item',formatter: function(params) { //配置显示内容if (typeof(params.value)[2] == "undefined")return params.name + '项目数：' + "0";elsereturn params.name + '项目数：' + params.value[2];}},/* legend: {   配置不同数据展示的颜色和标题orient: 'vertical',show : true,// 是否显示x:'930',data:[{name:'在建',textStyle:{fontSize:12,fontWeight:'bolder',color:'#cccccc'}, },{name:'未建'}]}, */geo: {zlevel:0,      //geo显示级别，默认是0        map: 'china',zoom: 1.5,symbol: 'image://img/flag.svg',label: {normal: {show: false,},emphasis: {show: false,color: '#292929'}},roam : true,itemStyle : {normal : { // 默认状态下地图的文字label : {show : false,//默认是否显示省份名称  //color:"#07131C",},areaColor: '#0A2664',borderColor: '#0A2664',//线shadowColor: '#0A2664',//外发光shadowBlur: 15,},emphasis : {// 鼠标放到地图上面显示文字label : {show : false//选中状态是否显示省份名称},areaColor: '#0a2dae',//悬浮区背景},},},series : [ {name : '在建',type : 'map',mapType : 'china',zoom : 1.5,coordinateSystem: 'geo', geoIndex: 1,roam : true,itemStyle : {normal : { // 默认状态下地图的文字label : {show : true,//默认是否显示省份名称  color:"#07131C",},areaColor: '#3a7fd5',borderColor: '#0a53e9',//线shadowColor: '#092f8f',//外发光shadowBlur: 15,},emphasis : {// 鼠标放到地图上面显示文字label : {show : true//选中状态是否显示省份名称},areaColor: '#0a2dae',//悬浮区背景},},data : data},{type: 'scatter',roam : true,symbol: 'image:///img/flag.svg',symbolSize: 22,coordinateSystem: 'geo',data: convertData(data),label: {/*  normal: {formatter: '{b}',position: 'right',show: false}, */emphasis: {show: false}},}]};//将配置加入地图中mapChart.setOption(mapoption, true);//捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳mapChart.on('georoam',function(params){var option = mapChart.getOption();//获得option对象if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时if(params.componentType=="geo"){option.series[0].zoom= option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变option.series[0].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变}else{option.geo[0].zoom=option.series[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变}}else{//捕捉到拖曳时option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变}mapChart.setOption(option, true);//设置option});//点击地图触发mapChart.on('click', function(params) {itemList(params["name"]);$("#city").val(params["name"]);$(".project-details").hide();//隐藏具体项目介绍$(".itemList").show();//$(".biaoti").show();//});

echarts 中国地图加自定义图标相关推荐

Echarts实现自定义图标——风向图
上图用了两种模式表示风向图,第一种是自定义系列,第二种使用了折线图,给折线图添加自定义图标. 两者的区别在于给options.series设置不同的type值,如下图: 那么我们来一步步实现代码,先创 ...
echarts 使用百度地图加入自定义图标标记
首先先上效果图,静态图(PS.制作动图还在学习中~): 地图上的文字未展示,根据经纬度标记图,循环展示每个标记点的数据~ 一.如何引入百度地图申请百度开发秘钥AK http://lbsyun.bai ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息.我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多a ...
ECharts 在省份地图上定制自定义图标
ECharts 在省份地图上定制自定义图标原型上有个生态分布的板块,就像是每个国家想把国旗插到月球啊,北极,南极之类的,然后点击右侧的 lenged 能够打开关闭相应的部分.具体情况如下: 要想实现 ...
iview weapp icon组件自定义图标小程序
写小程序图标没有想要的,需要自定义的时候.可以使用阿里巴巴矢量图标库自定义图标. 找到自己需要的,然后先加入购物车,点开购物车选择下载代码,然后解压压缩包. 复制 iconfont.css中的内容,到 ...
elementUI-添加自定义图标
elementui的小图标有限,跟UI给的不一样,这个时候咋办呢?百度走起....参考了两篇博主分享的自定义elementui中的图标和建立图标库,这里主要用到第一种实际中: elementU ...
python图标的演变_把Python脚本生成exe文件并添加版本信息和自定义图标
pyinstaller和py2exe把Python脚本生成exe文件,并添加版本信息和自定义图标. 写了一个查找产品通道号的小程序,目前还没进行异常处理. 以下是程序源码. # -*- coding: ...

echarts 中国地图加自定义图标

echarts 中国地图加自定义图标

echarts 中国地图加自定义图标相关推荐

最新文章

热门文章