echarts实现北京市地图_echarts北京地图,北京市地图echarts资源-CSDN文库

共4个文件

js：3个

html：1个

echarts地图

需积分: 44 27 浏览量 2018-04-11 08:33:53 上传评论收藏 799KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

echarts-beijing-map.zip （4个子文件）

echarts-beijing-map

beijingMap.html 3KB

jquery.min.js 81KB

echarts

echarts.js 2.3MB

echarts.min.js 691KB

<!DOCTYPE html> <html> <head> <title>北京地图</title> <script type="text/javascript" src = "js/jquery.min.js"></script> <script type="text/javascript" src = "echarts/echarts.min.js"></script> <script type="text/javascript" src= "mapjs/beijing.js"></script> </head> <body> <div id="map-wrap" style="width: 600px;height: 300px;"></div> </body> <script type="text/javascript"> $(function(){ //使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象 var mapChart = echarts.init(document.getElementById('map-wrap')); // mapChart的配置 var option = { title:{ text: '北京各区示意图', left:'center' }, tooltip: { trigger: 'item', formatter: '{b}<br/>{c} (个)' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, visualMap: { min: 0, max: 2000, text:['高','低'], realtime: false, calculable: true, inRange: { color: ['lightskyblue','yellow', 'orangered'] } }, series:[ { name: '北京各区', type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型 map: '北京', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文。这里用北京 aspectScale: 0.75, //长宽比. default: 0.75 zoom: 1.2, //roam: true, itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data: [ {name:'东城区', value: 1800}, {name:'西城区', value: 1700}, {name:'朝阳区', value: 1600}, {name:'丰台区', value: 1400}, {name:'石景山区', value: 1200}, {name:'海淀区', value: 1000}, {name:'门头沟区', value: 800}, {name:'房山区', value: 600}, {name:'通州区', value: 400}, {name:'顺义区', value: 200}, {name:'昌平区', value: 100}, {name:'大兴区', value: 300}, {name:'怀柔区', value: 500}, {name:'平谷区', value: 700}, {name:'密云县', value: 900}, {name:'延庆县', value: 1100} ] } ] }; //设置图表的配置项 mapChart.setOption(option); }) </script> </html>

评论收藏

内容反馈