海南小地图(echart)
先看效果
这个是海南省地图：
然后看引入的html：
<body class="">
<div class="container">
<div class="row">
<div class="biaoti">执法人员区域匹配</div>
<div class="chartContainer" id="certNumChart" style="padding-left: 10px;"></div>
<img src="data:image/dao.png" class="dao">
</div>
</div>
<script src="market_map.js"></script>
</body>
然后是market_map.js
var certNumChart;
$(document).ready(function() {
certNumChart = echarts.init(document.getElementById('certNumChart'));
certNumChart.showLoading();
initShowView();
//设置点击事件
certNumChart.on('click', function (params) {
var city = params.name;
var code = params.data.code;
var url = G3.webPath
+ "jsp/marketcheck/map_detail.jsp?code="+code;
G3.showModalDialog("执法人员区域匹配", url, {
width : 1000,
height : 560
}, function(e, ret) {
if (ret == "1") {
grid.reload();
}
});
});
});
var geoCoordMap;
var planePath = 'arrow';
var provinceMap = proCantName;
var certNumOption = {
tooltip : {
trigger: 'item',
formatter: '{b}:<br/> {c}'
},
legend: {
orient: 'horizontal',
x:'top',
data:["随机数据"]
},
grid:{
top:0,
bottom:0
},
geo : {
map : provinceMap,
top : '10%',
roam : false,
zoom:1.2,
silent : true,
itemStyle : {
normal : {
areaColor : '#1673c5',
borderColor : '#36a0fd'
},
emphasis : {
areaColor : '#2a333d'
}
}
},
dataRange: {
show:true,
min: 0,
max: 10,
x:"right",
color:['#0080FF','#D2E9FF'],
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
series : [
{
name: '检查数据量',
type: 'map',
mapType: proCantName,
zoom:1.2,
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[]
}
]
}; function initShowView() {
$.ajax({
async : true,
url : G3.webPath
+ "command/dispatcher/com.inspur.dtdcommon.casemanage.cmd.DtdChecManDispatcherCmd/queryList",
type : "POST",
data : {
checkYearDate : checkYearDate,
checkEndYearDate : checkEndYearDate
},
success : function(data) {
certNumOption.legend.data = data.catalog;
certNumOption.series[0].data = data.data;
certNumChart.hideLoading();
$.get(G3.webPath + 'skins/echars/dataGeo/geometryProvince/'+proCantCode+'.json', function (geoJson) {
echarts.registerMap(proCantName, geoJson);
certNumChart.setOption(certNumOption);
});
}
}); } function iconRefresh() {
$(document).on(
"click",
".icon-refresh",
function() {
var $container = $(this).parents(".chart-container").find(
".chartContainer");
if ($container.css("display") == "none") {
$container.css("display", "block");
$container.prev().css("display", "none");
}
});
}
注意：
initShowView方法中的参数： proCantCode = "460000"
geoJson:
certNumOption.series[0].data数据格式如下：
[
{
"code":"460100",
"name":"海口市",
"value":"363"
},
{
"code":"460200",
"name":"三亚市",
"value":"177"
},
{
"code":"469001",
"name":"五指山市",
"value":"64"
},
{
"code":"469002",
"name":"琼海市",
"value":"114"
},
{
"code":"460400",
"name":"儋州市",
"value":"153"
},
{
"code":"469005",
"name":"文昌市",
"value":"97"
},
{
"code":"469006",
"name":"万宁市",
"value":"117"
},
{
"code":"469007",
"name":"东方市",
"value":"80"
},
{
"code":"469021",
"name":"定安县",
"value":"61"
},
{
"code":"469022",
"name":"屯昌县",
"value":"65"
},
{
"code":"469023",
"name":"澄迈县",
"value":"95"
},
{
"code":"469024",
"name":"临高县",
"value":"73"
},
{
"code":"469025",
"name":"白沙县",
"value":"61"
},
{
"code":"469026",
"name":"昌江县",
"value":"59"
},
{
"code":"469027",
"name":"乐东县",
"value":"92"
},
{
"code":"469028",
"name":"陵水县",
"value":"71"
},
{
"code":"469029",
"name":"保亭县",
"value":"56"
},
{
"code":"469030",
"name":"琼中县",
"value":"58"
},
{
"code":"460500",
"name":"洋浦开发区",
"value":"19"
},
{
"code":"460300",
"name":"三沙市",
"value":"0"
}
]
然后初始化数据地图
海南小地图(echart)的更多相关文章
- e-chart 本地加载中国地图
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
- echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...
- echart 插件实现全国地图
最近的项目要用到一个能展现全国地图的功能,并且全国各个省份显示的颜色不同,点击省份后会返回省份名称.经过反复的查找最终确定了echart这个插件,最后的成果还不错,在这里写下来希望对大家有所帮助.话不 ...
- 利用eChart绘制网页图表
首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...
- echart搭配时间轴进行展示 （本例展示的是多时间 多地区 多指标条件 ）
1:照常先来几张图 看效果 2:首先 看官方文档 我把echart官方的例子给扒下来并整理了得出如下效果 上 案例图和代码 效果图 : 代码: <style type="text/c ...
- echart地图下钻
需求:展示中国地图,鼠标点击显示对应的省份 在echart的github上下载需要的 地图文件China.js,各个省份的json文件 遇到的问题:直接在浏览器打开报错,跨域问题,用webstrom打 ...
- Echart：前端很好的数据图表展现工具+demo
官网: http://echarts.baidu.com/index.html 通过一个简单的小Demo介绍echart的使用:demo均亲测可以运行 demo1: 1.新建一个echarts.ht ...
- echart封装，前端简单路由，图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
随机推荐
- MySql错误处理（三）- 错误处理的例子
有几种错误处理的声明形式: § 如果任何错误(不是 NOT FOUND ) , 设置 l_error 为 1 后继续执行: DECLARE CONTINUE HANDLER FOR SQLEXCEPT ...
- lucene4之后的近实时搜索实现
好久没干这块东西了,近几天须要做这个.所以又一次学了一下.首先很感谢孔浩老师,没孔浩老师的视频我也不会进入lucene的殿堂. 老师当时讲的实时搜索还是NRTManager,如今已经都变了,这个类已经 ...
- WorkerThread与MainThread之间通过Handler进行最简单的消息传递
一.从自己开启的线程中给主线程发送信息,更新UI 这个实例的效果是,在线程中通过handler发送一条信息给handler,然后通过handler更改UI线程中,textview的文字. 主要方法是( ...
- [Android Security] DEX文件格式分析
copy from : https://segmentfault.com/a/1190000007652937 0x00 前言 分析 dex 文件格式最好的方式是找个介绍文档,自己再写一个简单的 de ...
- RF的特征子集选取策略（spark ml）
支持连续变量和类别变量,类别变量就是某个属性有三个值,a,b,c,需要用Feature Transformers中的vectorindexer处理 上来是一堆参数 setMaxDepth:最大树深度 ...
- PHP Unit资料收集
ThinkPHP Unit https://github.com/gaoermai/ThinkPHPUnit PHPUnit入门http://blog.csdn.net/fly_heart_yuan/ ...
- 总是容易忘记：enum、int、string之间的快速转换
public enum Color { Red=, Green= } (1)Enum转换为String Color.Read.ToString() Convert.ToString(Color.Gre ...
- JSON与XML的区别比较（转）
原文链接:JSON与XML的区别比较 1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以 ...
- OA系统权限管理设计方案【转】
l 不同职责的人员,对于系统操作的权限应该是不同的.优秀的业务系统,这是最基本的功能. l 可以对“组”进行权限分配.对于一个大企业的业务系统来说,如果要求管理员为其下员工逐一分配系统操作权限的话,是 ...
- 2.1 jdk-spi的实现原理
dubbo-spi是在jdk-spi的基础上进行重写优化,下面看一下jdk-spi. 一.作用 为接口自动寻找实现类. 二.实现方式 标准制定者制定接口 不同厂商编写针对于该接口的实现类,并在jar的 ...