重庆巫山网站设计公司,平台销售模式有哪些,免费模板下载个人简历,广告公司网站本文记录两点#xff1a;1.地图实现#xff1b;2.各省份地图数据。地图实现都开始做地图了#xff0c;echarts怎么也有点了解了吧#xff0c;所以前两句初始化就不多说了#xff0c;不清楚的可以翻翻我以前的随笔。代码#xff1a;var china document.getElementById(1.地图实现2.各省份地图数据。地图实现都开始做地图了echarts怎么也有点了解了吧所以前两句初始化就不多说了不清楚的可以翻翻我以前的随笔。代码var china document.getElementById(china);var chinaEchart echarts.init(china);然后是一句增强用户体验的代码功能是当数据量大不能一下子刷出来的时候先显示一个刷新的图标可有可无chinaEchart.showLoading();然后是获取地图的json数据这是一种geoJson数据格式自己去写json数据还是不要想了可以说里面都是有一个个数据组成的点线面随笔一个小图形都上千行数据自己做图的话都是用工具画出来的文末会说。1 $.get(mapUrlchina.json,function(geoJson) {2 chinaEchart.hideLoading();3 echarts.registerMap(china, geoJson);4 var chinaOption {5 visualMap: {6 min: 0,7 max: 150,8 text: [High, Low],9 realtime: false,10 calculable: true,11 inRange: {12 color: [lightskyblue, yellow, orangered]13 },14 textStyle:{15 color:lightskyblue16 }17 },18 series: [{19 type: map,20 mapType: china,21 data: [22 //value2代表唯一标识23 {name: 河北, value: 50, value2: 1},24 {name: 北京, value: 100, value2: 2},25 {name: 天津, value: 80, value2: 3},26 {name: 山西, value: 20, value2: 4},27 {name: 内蒙古, value: 40, value2: 5},28 {name: 辽宁, value: 10, value2: 6},29 {name: 吉林, value: 50, value2: 7},30 {name: 黑龙江, value: 100, value2: 8},31 {name: 上海, value: 80, value2: 9},32 {name: 江苏, value: 20, value2: 10},33 {name: 浙江, value: 40, value2: 11},34 {name: 安徽, value: 10, value2: 12},35 {name: 福建, value: 50, value2: 13},36 {name: 江西, value: 100, value2: 14},37 {name: 山东, value: 80, value2: 15},38 {name: 河南, value: 20, value2: 16},39 {name: 湖北, value: 40, value2: 17},40 {name: 湖南, value: 10, value2: 18},41 {name: 广东, value: 50, value2: 19},42 {name: 广西, value: 100, value2: 20},43 {name: 海南, value: 80, value2: 21},44 {name: 四川, value: 20, value2: 22},45 {name: 贵州, value: 40, value2: 23},46 {name: 云南, value: 0, value2: 24},47 {name: 重庆, value: 0, value2: 25},48 {name: 西藏, value: 0, value2: 26},49 {name: 陕西, value: 0, value2: 27},50 {name: 甘肃, value: 0, value2: 28},51 {name: 青海, value: 0, value2: 29},52 {name: 宁夏, value: 0, value2: 30},53 {name: 新疆, value: 0, value2: 31},54 {name: 香港, value: 0, value2: 32},55 {name: 澳门, value: 0, value2: 33},56 {name: 台湾, value: 0, value2: 34}57 ],58 label: {59 normal: {60 show: true, //显示省份标签61 textStyle: {62 color: #eee63 } //省份标签字体颜色64 },65 emphasis: { //对应的鼠标悬浮效果66 show: true,67 textStyle: {68 color: #51569 }70 }71 },72 aspectScale: 0.75,//这个参数用于 scale 地图的长宽比。最终的 aspect 的计算方式是geoBoundingRect.width / geoBoundingRect.height * aspectScale73 zoom: 1,//当前视角的缩放比例。74 itemStyle: {75 normal: {76 borderWidth: .5, //区域边框宽度77 borderColor: #009fe8, //区域边框颜色78 areaColor: #18d5d1, //区域颜色79 },80 emphasis: {//鼠标滑过地图高亮的相关设置81 borderWidth: .5,82 borderColor: #4b0082,83 areaColor: #CDB30A,84 } }85 ,86 top:0,87 left:center,88 bottom:089 }] }90 ;91 chinaEchart.setOption(chinaOption);})本来不想贴这么多代码的看着心烦不过很多人第一次做地图估计也不一定有个跑的通的demo就把自己做的一个地图放上吧最起码写的注释多一些。需要注意的是里面第三行代码巨坑echarts.registerMap(china, geoJson);看清楚是registerMap我也忘了是ide提示的还是看的别人的demo不是这个方法而是一个长得很像很像的另一个api好像是版本问题稍微解释一下上面的代码第一行通过ajax获取服务器端geojson数据当然我这个是放前端模拟的一个json文件。第二行数据都获取成功了关闭以前那个刷新动画。第三行把这个数据告诉是谁要用这里的china要和后面series里mapType的值对应有段时间了忘了。后面的代码就是常规配置最后联系echarts对象和参数了和普通图表一样。各省份地图数据网上各种找各省份的地图数据看的揪心。给大家一个找到各省份json数据的方式吧。用git下载echarts在github上的demo方法2.点击红框1弹出下载的地址然后点击红框2复制地址。3.下载demo如果没有git要先下载gitgit到处都有甚至360软件管家都有。下载后在要放echarts的demo的文件夹空白处右键选择Git Bash Here打开命令行界面后等待出现如图所示AdministratorLize-PC MINGW64 /d/mango/testgit/incubator-echarts(master)$然后敲命令git clone https://github.com/apache/incubator-echarts.git注意复制黏贴地址只能用鼠标右键操作快捷键在命令行有其他作用。4.下载完毕后在下载的文件中按照路径incubator-echarts\map\json\province找到各省份json数据替换上面的china.json就能直接使用。好像还有js调用api的方式实现各省份的地图js文件也在同目录下这个不太清楚因为项目还需要自己画地图所以这种方式没尝试。附1.可以根据一个图片里某个城镇或者物体的形状自己画地图这是个神奇的网站可以自己画地图右侧得到的就是直接能被echarts使用的json数据。2.城镇地图获取这个好像只能获取到县级至于更小的级别用上面io网站比着地图自己画吧。
