成都市echarts地图下钻功能实现资源-CSDN文库

共41个文件

js：38个

html：3个

echarts

成都地图

地图下钻

5星 · 超过95%的资源需积分: 50 92 浏览量 2018-08-30 14:43:58 上传评论收藏 416KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

chengduMap.rar （41个子文件）

chengduMap

test.html 16KB

map_data

xundian.js 5KB

chenggong.js 2KB

guandu.js 2KB

xishan.js 3KB

luquan.js 4KB

fumin.js 3KB

anning.js 3KB

shilin.js 3KB

chengdu

pengzhou.js 5KB

wuhou.js 3KB

wenjiang.js 3KB

jinniu.js 4KB

pujiang.js 3KB

dayi.js 4KB

chongzhou.js 3KB

jintang.js 5KB

shuangliu.js 5KB

qingyang.js 3KB

longquanyi.js 4KB

pidu.js 3KB

qingbaijiang.js 4KB

xindu.js 4KB

jianyang.js 5KB

qionglai.js 4KB

chenghua.js 3KB

dujiangyan.js 3KB

chengdu.js 56KB

jinjiang.js 3KB

xinjin.js 2KB

wuhua.js 2KB

yiliang.js 5KB

jinning.js 3KB

tongzhou.js 4KB

panlong.js 2KB

dongchuan.js 4KB

chongming.js 2KB

kunming.js 35KB

echarts.js 2.04MB

css3.html 2KB

map.html 8KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 800px; height: 700px; margin: 60px auto; position: relative; z-index: 1000 } .map_box { width: 100%; height: 100%; } .back_btn { display: none; position: absolute; top: 10px; left: 10px; width: 200px; height: 40px; line-height: 40px; color: #ff6000; font-size: 18px; cursor: pointer; z-index: 10000 } body { background: rgb(21, 78, 144) } .heart { animation: heart 20s ease-in-out 1.7s infinite alternate; } @keyframes heart { from { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); } to { transform: rotateX(30deg); -webkit-transform: rotateX(30deg); -moz-transform: rotateX(30deg); } } .fadeInDown { animation: fadeInDown; } .OneAnimated { animation-duration: 3s; animation-fill-mode: both; } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } } </style> </head> <body> <div class="box fadeInDown OneAnimated"> <a class="back_btn"><<返回成都市地图</a> <div class="map_box heart" id="mapDiv"> </div> </div> </body> <script type="text/javascript" src="js/echarts.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script type="text/javascript" src="js/map_data/chengdu/chengdu.js"></script> <script type="text/javascript" src="js/map_data/chengdu/chenghua.js"></script> <script type="text/javascript" src="js/map_data/chengdu/chongzhou.js"></script> <script type="text/javascript" src="js/map_data/chengdu/dayi.js"></script> <script type="text/javascript" src="js/map_data/chengdu/dujiangyan.js"></script> <script type="text/javascript" src="js/map_data/chengdu/jianyang.js"></script> <script type="text/javascript" src="js/map_data/chengdu/jinjiang.js"></script> <script type="text/javascript" src="js/map_data/chengdu/jinniu.js"></script> <script type="text/javascript" src="js/map_data/chengdu/jintang.js"></script> <script type="text/javascript" src="js/map_data/chengdu/longquanyi.js"></script> <script type="text/javascript" src="js/map_data/chengdu/pengzhou.js"></script> <script type="text/javascript" src="js/map_data/chengdu/pidu.js"></script> <script type="text/javascript" src="js/map_data/chengdu/pujiang.js"></script> <script type="text/javascript" src="js/map_data/chengdu/qingbaijiang.js"></script> <script type="text/javascript" src="js/map_data/chengdu/qingyang.js"></script> <script type="text/javascript" src="js/map_data/chengdu/qionglai.js"></script> <script type="text/javascript" src="js/map_data/chengdu/shuangliu.js"></script> <script type="text/javascript" src="js/map_data/chengdu/wenjiang.js"></script> <script type="text/javascript" src="js/map_data/chengdu/wuhou.js"></script> <script type="text/javascript" src="js/map_data/chengdu/xindu.js"></script> <script type="text/javascript" src="js/map_data/chengdu/xinjin.js"></script> <script type="text/javascript"> function renderMap() { var myChart = echarts.init(document.getElementById('mapDiv')) //地图下钻 myChart.on('click', function(params) { $('.back_btn').css('display','block') var name = params.name //获取当前点击城市name var thisVal = []//当前城市数据 for (var i = 0; i < mapData.length; i++) { if(mapData[i].name===name){ thisVal.push(mapData[i]) } } var option = { tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name + '<br/>' + '新能源汽车数量：' + params.data.value[2] + '<br/>' + '充电桩数量：' + params.data.pilenum } }, geo: { map: name, zoom: 1, roam: true, //是否开启滚轮缩放和拖拽漫游,默认为false（关闭） hoverable: false, //悬浮是否高亮 scaleLimit: { min: 1, max: 1.5 }, selectedMode: 'single', //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。 label: { normal: { show: true, textStyle: { color: '#fff' } }, emphasis: { //鼠标悬浮显示内容设置 show: true, textStyle: { fontSize: 20 } } }, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, label: { show: true, textStyle: { color: 'rgba(255,255,255,0.9)', fontSize: '16' } }, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { borderColor: '#fff', borderWidth: 1, areaColor: '#389BB7' } } }, series: [{ name: '新能源汽车', // series名称 type: 'effectScatter', // series图表类型 coordinateSystem: 'geo', // series坐标系类型 symbolSize: function(val) { return val[2] / 50; }, rippleEffect: { //涟漪效果设置 period: 10, scale: 5, brushType: 'fill' }, hoverAnimation: true, label: { normal: { formatter: function(params, ticket, callback) { return params.data.value[2] }, position: 'top', show: true, textStyle: { color: '#fff' } } }, data:thisVal }], visualMap: { type: 'continuous', // 连续型 min: 0, // 值域最小值，必须参数 max: 1200, // 值域

评论收藏

内容反馈