网站搭建好了不用会不会被攻击,产品介绍彩页模板,网站优化工具,wordpress点击网页效果概述
基于echarts的大数据中国地图展示#xff0c;结合API定制#xff0c;开发样式#xff0c;监听鼠标事件#xff0c;实现带参数路由跳转等自定义事件。
详细 一、概述 实际项目中大概率会遇到很多需要进行数据展示的地方#xff0c;如折现图#xff0c;柱状图等结合API定制开发样式监听鼠标事件实现带参数路由跳转等自定义事件。
详细 一、概述 实际项目中大概率会遇到很多需要进行数据展示的地方如折现图柱状图等今天给大家介绍一个更加炫酷的中国地图大数据展示结合echarts免费开源第三方插件可以实现自己的定制样式定制提示。
二、演示效果 三、目录结构 项目构成 引用
script srcdist/echarts.js/script
script srcmap/js/china.js/script
四、详细步骤 1、首先给定一下全局样式、给个地图容器 style*{margin:0;padding:0}html,body{width:100%;height:100%;}#main{width:800px;height:600px;margin: 150px auto;border:1px solid #ddd;}/*建议长宽比0.75符合审美*//stylediv idmain/div
2、获取容器DOM给定地图配置
var myChart echarts.init(document.getElementById(main));
myChart.setOption(option);
3、详细配置定制样式给自定义事件
option {tooltip: {formatter:function(params,ticket, callback){return params.seriesNamebr /params.nameparams.value}},visualMap: {min: 0,max: 1500,left: left,top: bottom,text: [高,低],inRange: {color: [#e0ffff, #006edd]},show:true},geo: {map: china,roam: false,zoom:1.23,label: {normal: {show: true,fontSize:10,color: rgba(0,0,0,0.7)}},itemStyle: {normal:{borderColor: rgba(0, 0, 0, 0.2)},emphasis:{areaColor: #F3B329,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: rgba(0, 0, 0, 0.5)}}},series : [{name: 信息量,type: map,geoIndex: 0,data:dataList}]};
tooltip定制信息提示框的内容其中params参数表示数据
数据格式 var dataList[{name:南海诸岛,value:0},{name: 北京, value: randomValue()},{name: 天津, value: randomValue()},{name: 上海, value: randomValue()}]
这里为了演示效果我随机给定的value值randomValue为我自己定义的一个获取随机数函数
visualMap图注样式定制其中包括color范围文字提示
geo:定义地图为china其中可能大概率要用的一个配置zoom: 视角缩放比例roam是否开启缩放和平移 itemStyle地图外观定制其中normal表示正常显示的样式emphasis表示鼠标悬浮下样式
series整体配置 其中type很关键 表示该例是地图data:图表所用数据实际项目中大家可以通过http获取数据再赋值给data 自定义事件
myChart.on(click, function (params) {alert(params.name:params.seriesName:params.value);});
大家可以给刚刚获取的myChart实例添加事件监听其中重要的一个参数params可以得到你想要的一切O(∩_∩)O哈哈~
这里给大家打印一下 最后再给大家一个友好建议
一、插件自带的地图省份名字是默认出现在省会城市的位置导致很多省份的名字有点挤甚至偏移大家可以打开map/js/china.js
二、检索自己想要更改的省份名字如湖南 properties:{cp:[112.982279,28.19409],name:湖南,childNum:3}}
其中cp即表示文字的位置两个坐标表示经纬度大家根据需要调整。哈哈 大致就到这里了有兴趣的小伙伴可以试试 整体代码如下
!DOCTYPE html
html
headmeta charsetUTF-8titlemap/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0meta http-equivX-UA-Compatible contentIEedge,chrome1/script srcdist/echarts.js/scriptscript srcmap/js/china.js/scriptstyle*{margin:0;padding:0}html,body{width:100%;height:100%;}#main{width:600px;height:450px;margin: 150px auto;border:1px solid #ddd;}/*默认长宽比0.75*//style
/head
bodydiv idmain/divscript typetext/javascriptvar dataList[{name:南海诸岛,value:0},{name: 北京, value: randomValue()},{name: 天津, value: randomValue()},{name: 上海, value: randomValue()},{name: 重庆, value: randomValue()},{name: 河北, value: randomValue()},{name: 河南, value: randomValue()},{name: 云南, value: randomValue()},{name: 辽宁, value: randomValue()},{name: 黑龙江, value: randomValue()},{name: 湖南, value: randomValue()},{name: 安徽, value: randomValue()},{name: 山东, value: randomValue()},{name: 新疆, value: randomValue()},{name: 江苏, value: randomValue()},{name: 浙江, value: randomValue()},{name: 江西, value: randomValue()},{name: 湖北, value: randomValue()},{name: 广西, value: randomValue()},{name: 甘肃, value: randomValue()},{name: 山西, value: randomValue()},{name: 内蒙古, value: randomValue()},{name: 陕西, value: randomValue()},{name: 吉林, value: randomValue()},{name: 福建, value: randomValue()},{name: 贵州, value: randomValue()},{name: 广东, value: randomValue()},{name: 青海, value: randomValue()},{name: 西藏, value: randomValue()},{name: 四川, value: randomValue()},{name: 宁夏, value: randomValue()},{name: 海南, value: randomValue()},{name: 台湾, value: randomValue()},{name: 香港, value: randomValue()},{name: 澳门, value: randomValue()}]var myChart echarts.init(document.getElementById(main));function randomValue() {return Math.round(Math.random()*1000);}option {tooltip: {formatter:function(params,ticket, callback){return params.seriesNamebr /params.nameparams.value}//数据格式化},visualMap: {min: 0,max: 1500,left: left,top: bottom,text: [高,低],//取值范围的文字inRange: {color: [#e0ffff, #006edd]//取值范围的颜色},show:true//图注},geo: {map: china,roam: false,//不开启缩放和平移zoom:1.23,//视角缩放比例label: {normal: {show: true,fontSize:10,color: rgba(0,0,0,0.7)}},itemStyle: {normal:{borderColor: rgba(0, 0, 0, 0.2)},emphasis:{areaColor: #F3B329,//鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: rgba(0, 0, 0, 0.5)}}},series : [{name: 信息量,type: map,geoIndex: 0,data:dataList}]};myChart.setOption(option);myChart.on(click, function (params) {alert(params.name);});/* setTimeout(function () {myChart.setOption({series : [{name: 信息量,type: map,geoIndex: 0,data:dataList}]});},1000)*//script
/body
/html
