echarts数据地图实现省市联动点击资源-CSDN下载

共37个文件

js：35个

html：2个

1星需积分: 49 133 浏览量 2018-09-21 15:09:20 上传评论 1 收藏 852KB RAR 举报

在本文中，我们将深入探讨如何使用ECharts库来实现数据地图的省市联动点击效果。ECharts是一款基于JavaScript的开源可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及地图等，且支持在各种浏览器上运行。在数据地图中实现省市联动点击，可以为用户带来更直观、交互式的体验，帮助他们探索和理解地理分布的数据。我们需要引入ECharts库。通常，我们会在HTML文件中通过CDN链接或者本地文件引入ECharts的JS文件，例如： ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> ``` 然后，创建一个用于展示地图的div容器，并为其设置合适的宽高： ```html <div id="main" style="width: 800px;height:600px;"></div> ``` 接下来，编写JavaScript代码来初始化ECharts实例并配置地图。实例化ECharts对象，绑定到之前创建的div元素： ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 为了实现数据地图，我们需要选择合适的地图类型。ECharts内置了中国省级地图，我们可以直接使用。如果需要显示市级数据，还需要下载对应的地图JSON数据文件，如`china-provinces.json`或`china-cities.json`。然后，设置地图的配置项，包括地图类型、数据源、点击事件等： ```javascript var option = { tooltip: { trigger: 'item' }, series: [ { name: '中国地图', type: 'map', mapType: 'China', // 使用内置的'China'地图 roam: false, // 是否开启缩放和平移 label: { show: true }, emphasis: { label: { show: true }, itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, data: [ // 这里填写省市级数据，格式为{'name': '区域名称', value: 数据值} // ... ], onclick: function (params) { // 省份点击事件处理 // 获取点击的省份名 var province = params.name; // 在这里加载对应省份的市级地图数据并重新渲染 // ... } } ] }; myChart.setOption(option); ``` 在`onclick`事件处理器中，我们需要根据点击的省份加载相应的市级地图数据，并更新ECharts实例的配置。这通常涉及到异步请求市级数据（如果之前没有预先加载），然后更新`series`中的数据，并调用`myChart.setOption()`来刷新地图。市级数据的格式与省级数据类似，但每个对象还需包含子项表示市级数据。例如： ```javascript { name: '北京市', value: 123456, children: [ {name: '北京市市辖区', value: 56789}, {name: '北京市县', value: 12345} ] } ``` 当市级数据加载完成后，将新的数据结构赋值给`option.series[0].data`，然后调用`myChart.setOption()`刷新地图，从而实现省市联动的效果。通过以上步骤，我们就成功地创建了一个能够展示全国省市数据，并在用户点击省份时下钻到市级数据的地图应用。这种交互式展示方式有助于用户更好地理解和分析地理分布数据。在实际项目中，可能还需要考虑数据动态加载、性能优化、自定义样式等方面的问题，但以上已经涵盖了实现基本功能的关键步骤。

资源推荐

资源详情

资源评论

收起资源包目录

echarts数据地图实现省市联动展示.rar （37个子文件）

echarts数据地图实现省市联动展示

echarts-china-map点击显示省地图

map-sichuan.html 2KB

province

chongqing.js 47KB

hubei.js 38KB

ningxia.js 13KB

guangdong.js 71KB

shandong.js 50KB

xizang.js 50KB

jiangxi.js 32KB

hainan.js 29KB

heilongjiang.js 77KB

sichuan.js 83KB

hebei.js 39KB

liaoning.js 49KB

anhui.js 31KB

shanxi.js 23KB

xinjiang.js 86KB

tianjin.js 11KB

guizhou.js 32KB

guangxi.js 46KB

shanxi1.js 31KB

yunnan.js 62KB

jilin.js 41KB

taiwan.js 29KB

fujian.js 43KB

xianggang.js 13KB

henan.js 36KB

neimenggu.js 57KB

zhejiang.js 50KB

aomen.js 3KB

shanghai.js 12KB

qinghai.js 44KB

hunan.js 45KB

beijing.js 22KB

jiangsu.js 23KB

gansu.js 47KB

china.js 60KB

map-china-1.html 13KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> <title>ECharts</title>  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <style>#china-map {width:582px; height: 482px;margin: auto;}</style> </head> <body> <div id="china-map"></div> <script> var myChart = echarts.init(document.getElementById('china-map')); function initChina(){ var option = { title : { // text: '订单量', // subtext: '纯属虚构', x:'center' }, tooltip : { //提示框组件。 trigger: 'item' //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 }, legend: { orient: 'horizontal', //图例的排列方向 x:'left', //图例的位置 data:['订单量'] }, visualMap: {//颜色的设置 dataRange x: 'left', y: 'center', splitList: [ {start: 1500}, {start: 900, end: 1500}, {start: 310, end: 1000}, {start: 200, end: 300}, {start: 10, end: 200, label: '10 到 200（自定义label）'}, {start: 5, end: 5, label: '5（自定义特殊颜色）', color: '#077FBA'}, {end: 10} ], // min: 0, // max: 2500, // calculable : true,//颜色呈条状 text:['高','低'],// 文本，默认为数值文本 // color: ['#E0022B', '#E09107', '#A3E00B'] color: ['#C1D3E3', '#077FBA', '#C9514C'] }, toolbox: {//工具栏 show: false, orient : 'vertical',//工具栏 icon 的布局朝向 x: 'right', y: 'center', feature : {//各工具配置项。 mark : {show: true}, dataView : {show: true, readOnly: false},//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。 restore : {show: true},//配置项还原。 saveAsImage : {show: true}//保存为图片。 } }, roamController: {//控制地图的上下左右放大缩小图上没有显示 show: true, x: 'right', mapTypeControl: { 'china': true } }, series : [ { name: '订单量', type: 'map', mapType: 'china', roam: false,//是否开启鼠标缩放和平移漫游 itemStyle:{//地图区域的多边形图形样式 normal:{//是图形在默认状态下的样式 label:{ show:false,//是否显示标签 textStyle: { color: "rgb(249, 249, 249)" } } }, emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时 label:{show:true} } }, top:"3%",//组件距离容器的距离 data:[ {name: '北京',value: Math.round(Math.random()*2000)}, {name: '天津',value: Math.round(Math.random()*2000)}, {name: '上海',value: Math.round(Math.random()*2000)}, {name: '重庆',value: Math.round(Math.random()*2000)}, {name: '河北',value: 0}, {name: '河南',value: Math.round(Math.random()*2000)}, {name: '云南',value: 5}, {name: '辽宁',value: 305}, {name: '黑龙江',value: Math.round(Math.random()*2000)}, {name: '湖南',value: 200}, {name: '安徽',value: Math.round(Math.random()*2000)}, {name: '山东',value: Math.round(Math.random()*2000)}, {name: '新疆',value: Math.round(Math.random()*2000)}, {name: '江苏',value: Math.round(Math.random()*2000)}, {name: '浙江',value: Math.round(Math.random()*2000)}, {name: '江西',value: Math.round(Math.random()*2000)}, {name: '湖北',value: Math.round(Math.random()*2000)}, {name: '广西',value: Math.round(Math.random()*2000)}, {name: '甘肃',value: Math.round(Math.random()*2000)}, {name: '山西',value: Math.round(Math.random()*2000)}, {name: '内蒙古',value: Math.round(Math.random()*2000)}, {name: '陕西',value: Math.round(Math.random()*2000)}, {name: '吉林',value: Math.round(Math.random()*2000)}, {name: '福建',value: Math.round(Math.random()*2000)}, {name: '贵州',value: Math.round(Math.random()*2000)}, {name: '广东',value: Math.round(Math.random()*2000)}, {name: '青海',value: Math.round(Math.random()*2000)}, {name: '西藏',value: Math.round(Math.random()*2000)}, {name: '四川',value: Math.round(Math.random()*2000)}, {name: '宁夏',value: Math.round(Math.random()*2000)}, {name: '海南',value: Math.round(Math.random()*2000)}, {name: '台湾',value: Math.round(Math.random()*2000)}, {name: '香港',value: Math.round(Math.random()*2000)}, {name: '澳门',value: Math.round(Math.random()*2000)} ] } ] }; myChart.setOption(option); } initChina(); myChart.on('mouseover', function (params) { var dataIndex = params.dataIndex; // console.log(params); }); function initEcharts(pName){ var myChart1 = echarts.init(document.getElementById('china-map')); var option = { title : { // text: '订单量', // subtext: '纯属虚构', x:'center' }, tooltip : {//提示框组件。 trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 }, legend: { show: false, orient: 'horizontal',//图例的排列方向 x:'left',//图例的位置 data:['订单量'] }, visualMap: {//颜色的设置 dataRange x: 'left', y: 'center', // splitList: [ // {start: 1500}, // {start: 900, end: 1500}, // {start: 310, end: 1000}, // {start: 200, end: 300}, // {start: 10, end: 200, label: '10 到 200（自定义label）'},

评论收藏

内容反馈