码迷,mamicode.com
首页 > 其他好文 > 详细

echarts实现省市区地图下钻

时间:2020-03-16 18:56:24      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:lin   sel   cto   HERE   导入   div   pie   生成   end   




<%@ 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实现省市区地图下钻

标签:lin   sel   cto   HERE   导入   div   pie   生成   end   

原文地址:https://www.cnblogs.com/zhang12345/p/12505682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!