echarts实现省市区地图下钻
Posted zhang12345
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts实现省市区地图下钻相关的知识，希望对你有一定的参考价值。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title>
<!--这些都是需要导入的jar包--> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script src="js/province/anhui.js"></script> <script src="js/province/aomen.js"></script> <script src="js/province/beijing.js"></script> <script src="js/province/chongqing.js"></script> <script src="js/province/fujian.js"></script> <script src="js/province/gansu.js"></script> <script src="js/province/guangdong.js"></script> <script src="js/province/guangxi.js"></script> <script src="js/province/hainan.js"></script> <script src="js/province/hebei.js"></script> <script src="js/province/heilongjiang.js"></script> <script src="js/province/henan.js"></script> <script src="js/province/hubei.js"></script> <script src="js/province/hunan.js"></script> <script src="js/province/jiangsu.js"></script> <script src="js/province/jiangxi.js"></script> <script src="js/province/jilin.js"></script> <script src="js/province/liaoning.js"></script> <script src="js/province/neimenggu.js"></script> <script src="js/province/ningxia.js"></script> <script src="js/province/qinghai.js"></script> <script src="js/province/shandong.js"></script> <script src="js/province/shanghai.js"></script> <script src="js/province/shanxi.js"></script> <script src="js/province/shanxi1.js"></script> <script src="js/province/sichuan.js"></script> <script src="js/province/taiwan.js"></script> <script src="js/province/tianjin.js"></script> <script src="js/province/xianggang.js"></script> <script src="js/province/xinjiang.js"></script> <script src="js/province/xizang.js"></script> <script src="js/province/yunnan.js"></script> <script src="js/province/zhejiang.js"></script> <script src="js/jquery-1.12.1.js"></script> </head> <body> <div id="main" style="width: 800px; height: 600px;"></div> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <script type="text/javascript"> initChina(); //通过执行这个函数来加载中国地图 function initChina(){ var myChart = echarts.init(document.querySelector(‘#main‘)) //通过 echarts.init 方法初始化一个 echarts 实例 myChart.setOption({ //通过 setOption 方法生成一个简单的map,指定图表的配置项和数据 title:{ text:‘2月19日疫情分布图‘, },//title //背景颜色 backgroundColor:‘#F9F9F9‘, visualMap:[{//地图着色 type: ‘continuous‘ ,//连续的颜色 pieces:[//根据value进行颜色区分 { gt : 100}, { gt : 10, lte :99}, { gt : 0, lte :9} ] }],//visiualMap series:{ type:‘map‘,//统计图类型 map:‘china‘,//中国地图 label:{ //覆盖物设置 show:true },//lable }//series })//myChart.setOption myChart.on(‘click‘, function (param) { //alert(param.name) //通过鼠标点击事件，会执行City（）函数，其中的参数时param.name，就是省份的名称，从而就可以加载出各个身份的地图 var str_p = param.name; //param参数包含的内容有： //param.name：X轴的值 //param.data：Y轴的值 //param.value：Y轴的值 //param.type：点击事件均为click //param.seriesName：legend的名称 //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） //param.dataIndex：数值序列（X轴上当前点是第几个点） City(str_p); }) } </script> <script type="text/javascript"> //城市查找函数 ajax异步 function City(province){ //console.log(cities) var myChart = echarts.init(document.querySelector(‘#main‘)) myChart.setOption({ title:{ text:province +‘数据分部‘, subtext:‘数据来源网络‘, left:‘center‘ },//title //背景颜色 backgroundColor:‘#f7f7f7‘, series:{ type:‘map‘,//统计图类型 map: province,//省份地图 label:{ //覆盖物设置 show:true } }//series })//myChart.setOption myChart.on(‘click‘, function (param) { initChina();//通过鼠标点击事件执行initChina这个函数，就可以再次加载中国地图
}) }//function city </script> </body> </html>
准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、map（地图），在echarts官网里都有相关组件的详细解释
以上是关于echarts实现省市区地图下钻的主要内容，如果未能解决你的问题，请参考以下文章