echarts显示地图以及jQuery地域选择器插件

前几天再做项目的时候用到了echarts的map显示。由于官网上的例子有限，我要在例子上进行扩展，很是搞了一番功夫。话不多说了，看例子：

1.echarts作为百度的一个开源插件，在有些地方可以做的很炫。主要是支持多种方式可以使用。

在echarts官网上下载：http://echarts.baidu.com/doc/example.html

现在看看怎么在jsp里面使用：

模块化单文件引入：这是百度推荐使用的。个人认为不咋好用，因为这要支持require。

标签式单文件引入：这个跟我们引入普通的js是一样的，下面的讲解主要是以这个方式为主。

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

//from echarts example
<body><div id="main" style="height:400px;"></div>...<script src="example/www2/js/dist/echarts-all.js"></script><script>var myChart = echarts.init(document.getElementById('main'));var option = {...}myChart.setOption(option);</script>
</body>

可以直接引入的单文件如下：

dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试

下面这个例子是显示iPhone在中国的销量：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<script type="text/javascript" src="../echarts-all.js"></script> 这个就是echarts全部js，直接引入即可。

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

var myChart = echarts.init(document.getElementById('main'));

option = {

title : {

text: 'iphone销量',

subtext: '纯属虚构',

x:'center'

tooltip : {

trigger: 'item'

legend: {

orient: 'vertical',

x:'left',

data:['iphone3','iphone4','iphone5']

dataRange: {

min: 0,

max: 2500,

x: 'left',

y: 'bottom',

text:['高','低'], // 文本，默认为数值文本

calculable : true

toolbox: {

show: true,

orient : 'vertical',

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 : [

{

type: 'map',

mapType: 'china',

roam: false,

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

data:[

{name: '北京',value: Math.round(Math.random()*1000)},

{name: '天津',value: Math.round(Math.random()*1000)},

{name: '上海',value: Math.round(Math.random()*1000)},

{name: '重庆',value: Math.round(Math.random()*1000)},

{name: '河北',value: Math.round(Math.random()*1000)},

{name: '河南',value: Math.round(Math.random()*1000)},

{name: '云南',value: Math.round(Math.random()*1000)},

{name: '辽宁',value: Math.round(Math.random()*1000)},

{name: '黑龙江',value: Math.round(Math.random()*1000)},

{name: '湖南',value: Math.round(Math.random()*1000)},

{name: '安徽',value: Math.round(Math.random()*1000)},

{name: '山东',value: Math.round(Math.random()*1000)},

{name: '新疆',value: Math.round(Math.random()*1000)},

{name: '江苏',value: Math.round(Math.random()*1000)},

{name: '浙江',value: Math.round(Math.random()*1000)},

{name: '江西',value: Math.round(Math.random()*1000)},

{name: '湖北',value: Math.round(Math.random()*1000)},

{name: '广西',value: Math.round(Math.random()*1000)},

{name: '甘肃',value: Math.round(Math.random()*1000)},

{name: '山西',value: Math.round(Math.random()*1000)},

{name: '内蒙古',value: Math.round(Math.random()*1000)},

{name: '陕西',value: Math.round(Math.random()*1000)},

{name: '吉林',value: Math.round(Math.random()*1000)},

{name: '福建',value: Math.round(Math.random()*1000)},

{name: '贵州',value: Math.round(Math.random()*1000)},

{name: '广东',value: Math.round(Math.random()*1000)},

{name: '青海',value: Math.round(Math.random()*1000)},

{name: '西藏',value: Math.round(Math.random()*1000)},

{name: '四川',value: Math.round(Math.random()*1000)},

{name: '宁夏',value: Math.round(Math.random()*1000)},

{name: '海南',value: Math.round(Math.random()*1000)},

{name: '台湾',value: Math.round(Math.random()*1000)},

{name: '香港',value: Math.round(Math.random()*1000)},

{name: '澳门',value: Math.round(Math.random()*1000)}

]

{

type: 'map',

mapType: 'china',

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

data:[

{name: '北京',value: Math.round(Math.random()*1000)},

{name: '天津',value: Math.round(Math.random()*1000)},

{name: '上海',value: Math.round(Math.random()*1000)},

{name: '重庆',value: Math.round(Math.random()*1000)},

{name: '河北',value: Math.round(Math.random()*1000)},

{name: '安徽',value: Math.round(Math.random()*1000)},

{name: '新疆',value: Math.round(Math.random()*1000)},

{name: '浙江',value: Math.round(Math.random()*1000)},

{name: '江西',value: Math.round(Math.random()*1000)},

{name: '山西',value: Math.round(Math.random()*1000)},

{name: '内蒙古',value: Math.round(Math.random()*1000)},

{name: '吉林',value: Math.round(Math.random()*1000)},

{name: '福建',value: Math.round(Math.random()*1000)},

{name: '广东',value: Math.round(Math.random()*1000)},

{name: '西藏',value: Math.round(Math.random()*1000)},

{name: '四川',value: Math.round(Math.random()*1000)},

{name: '宁夏',value: Math.round(Math.random()*1000)},

{name: '香港',value: Math.round(Math.random()*1000)},

{name: '澳门',value: Math.round(Math.random()*1000)}

]

{

type: 'map',

mapType: 'china',

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

data:[

{name: '北京',value: Math.round(Math.random()*1000)},

{name: '天津',value: Math.round(Math.random()*1000)},

{name: '上海',value: Math.round(Math.random()*1000)},

{name: '广东',value: Math.round(Math.random()*1000)},

{name: '台湾',value: Math.round(Math.random()*1000)},

{name: '香港',value: Math.round(Math.random()*1000)},

{name: '澳门',value: Math.round(Math.random()*1000)}

]

}

]

};

myChart.setOption(option);

</script>

</body>

</html>

显示效果：

下面在看一个通过全国地图找到地级市的例子，这个例子官网上也有，只不过我做了改进，可以选择地级市。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var myChart = echarts.init(document.getElementById('main'));

option = {

tooltip : {

trigger: 'item'

toolbox: {

show : true,

orient: 'vertical',

x:'right',

y:'center',

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false}

}

series : [

{

tooltip: {

trigger: 'item',

formatter: '{b}'

type: 'map',

mapType: 'china',

mapLocation: {//显示主地图的位置及其大小

x: 'left',

y: 'top',

width: '50%'

roam: false,//地图不允许拖动

selectedMode : 'single',

itemStyle:{

normal:{label:{show:true}},

emphasis:{label:{show:true}}

data:[

{name: '北京', selected:false},

{name: '天津', selected:false},

{name: '上海', selected:false},

{name: '重庆', selected:false},

{name: '河北', selected:false},

{name: '河南', selected:false},

{name: '云南', selected:false},

{name: '辽宁', selected:false},

{name: '黑龙江', selected:false},

{name: '湖南', selected:false},

{name: '安徽', selected:false},

{name: '山东', selected:false},

{name: '新疆', selected:false},

{name: '江苏', selected:false},

{name: '浙江', selected:false},

{name: '江西', selected:false},

{name: '湖北', selected:false},

{name: '广西', selected:false},

{name: '甘肃', selected:false},

{name: '山西', selected:true},//默认选中

{name: '内蒙古',selected:true},//默认选中

{name: '陕西', selected:false},

{name: '吉林', selected:false},

{name: '福建', selected:false},

{name: '贵州', selected:false},

{name: '广东', selected:false},

{name: '青海', selected:false},

{name: '西藏', selected:false},

{name: '四川', selected:false},

{name: '宁夏', selected:false},

{name: '海南', selected:false},

{name: '台湾', selected:false},

{name: '香港', selected:false},

{name: '澳门', selected:false}

]

}

animation: false

};

myChart.setOption(option, true); //显示国家地图

//var ecConfig = require('echarts/config');

//myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){//由于是标签式单文件引入所以这个模块化单文件引入的事件要改变,不能使用require

myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param){//单击省份事件

var selected = param.selected;

var selectedProvince;

var name;

for (var i = 0, l = option.series[0].data.length; i < l; i++) {

name = option.series[0].data[i].name;

option.series[0].data[i].selected = selected[name];

if (selected[name]) {

selectedProvince = name;

}

alert(selectedProvince);//所选择省的名字

if (typeof selectedProvince == 'undefined') {

option.series.splice(1);

option.legend = null;

option.dataRange = null;

myChart.setOption(option, true);//如果选择省份不存在则显示国家

return;

}

option.series[1] = {

type: 'map',

mapType: selectedProvince,

itemStyle:{

normal:{label:{show:true}},//没选择时候省份是否显示

emphasis:{label:{show:true}}//选择之后省份是否显示

mapLocation: {//显示子地图的位置及其大小

x: 'right',

y: 'top',

width: '50%'

roam: false,//地图不允许拖动

data:[

{name: '重庆市',value: Math.round(Math.random()*1000)},

{name: '北京市',value: Math.round(Math.random()*1000)},

{name: '海淀区',value: Math.round(Math.random()*1000)},//可以补填四个直辖市所管辖的区，否则直辖市所在的区没数据

{name: '天津市',value: Math.round(Math.random()*1000)},

{name: '上海市',value: Math.round(Math.random()*1000)},

{name: '香港',value: Math.round(Math.random()*1000)},

{name: '澳门',value: Math.round(Math.random()*1000)},

{name: '巴音郭楞蒙古自治州',value: Math.round(Math.random()*1000)},

{name: '和田地区',value: Math.round(Math.random()*1000)},

{name: '哈密地区',value: Math.round(Math.random()*1000)},

{name: '阿克苏地区',value: Math.round(Math.random()*1000)},

{name: '阿勒泰地区',value: Math.round(Math.random()*1000)},

{name: '喀什地区',value: Math.round(Math.random()*1000)},

{name: '塔城地区',value: Math.round(Math.random()*1000)},

{name: '昌吉回族自治州',value: Math.round(Math.random()*1000)},

{name: '克孜勒苏柯尔克孜自治州',value: Math.round(Math.random()*1000)},

{name: '吐鲁番地区',value: Math.round(Math.random()*1000)},

{name: '伊犁哈萨克自治州',value: Math.round(Math.random()*1000)},

{name: '博尔塔拉蒙古自治州',value: Math.round(Math.random()*1000)},

{name: '乌鲁木齐市',value: Math.round(Math.random()*1000)},

{name: '克拉玛依市',value: Math.round(Math.random()*1000)},

{name: '阿拉尔市',value: Math.round(Math.random()*1000)},

{name: '图木舒克市',value: Math.round(Math.random()*1000)},

{name: '五家渠市',value: Math.round(Math.random()*1000)},

{name: '石河子市',value: Math.round(Math.random()*1000)},

{name: '那曲地区',value: Math.round(Math.random()*1000)},

{name: '阿里地区',value: Math.round(Math.random()*1000)},

{name: '日喀则地区',value: Math.round(Math.random()*1000)},

{name: '林芝地区',value: Math.round(Math.random()*1000)},

{name: '昌都地区',value: Math.round(Math.random()*1000)},

{name: '山南地区',value: Math.round(Math.random()*1000)},

{name: '拉萨市',value: Math.round(Math.random()*1000)},

{name: '呼伦贝尔市',value: Math.round(Math.random()*1000)},

{name: '阿拉善盟',value: Math.round(Math.random()*1000)},

{name: '锡林郭勒盟',value: Math.round(Math.random()*1000)},

{name: '鄂尔多斯市',value: Math.round(Math.random()*1000)},

{name: '赤峰市',value: Math.round(Math.random()*1000)},

{name: '巴彦淖尔市',value: Math.round(Math.random()*1000)},

{name: '通辽市',value: Math.round(Math.random()*1000)},

{name: '乌兰察布市',value: Math.round(Math.random()*1000)},

{name: '兴安盟',value: Math.round(Math.random()*1000)},

{name: '包头市',value: Math.round(Math.random()*1000)},

{name: '呼和浩特市',value: Math.round(Math.random()*1000)},

{name: '乌海市',value: Math.round(Math.random()*1000)},

{name: '海西蒙古族藏族自治州',value: Math.round(Math.random()*1000)},

{name: '玉树藏族自治州',value: Math.round(Math.random()*1000)},

{name: '果洛藏族自治州',value: Math.round(Math.random()*1000)},

{name: '海南藏族自治州',value: Math.round(Math.random()*1000)},

{name: '海北藏族自治州',value: Math.round(Math.random()*1000)},

{name: '黄南藏族自治州',value: Math.round(Math.random()*1000)},

{name: '海东地区',value: Math.round(Math.random()*1000)},

{name: '西宁市',value: Math.round(Math.random()*1000)},

{name: '甘孜藏族自治州',value: Math.round(Math.random()*1000)},

{name: '阿坝藏族羌族自治州',value: Math.round(Math.random()*1000)},

{name: '凉山彝族自治州',value: Math.round(Math.random()*1000)},

{name: '绵阳市',value: Math.round(Math.random()*1000)},

{name: '达州市',value: Math.round(Math.random()*1000)},

{name: '广元市',value: Math.round(Math.random()*1000)},

{name: '雅安市',value: Math.round(Math.random()*1000)},

{name: '宜宾市',value: Math.round(Math.random()*1000)},

{name: '乐山市',value: Math.round(Math.random()*1000)},

{name: '南充市',value: Math.round(Math.random()*1000)},

{name: '巴中市',value: Math.round(Math.random()*1000)},

{name: '泸州市',value: Math.round(Math.random()*1000)},

{name: '成都市',value: Math.round(Math.random()*1000)},

{name: '资阳市',value: Math.round(Math.random()*1000)},

{name: '攀枝花市',value: Math.round(Math.random()*1000)},

{name: '眉山市',value: Math.round(Math.random()*1000)},

{name: '广安市',value: Math.round(Math.random()*1000)},

{name: '德阳市',value: Math.round(Math.random()*1000)},

{name: '内江市',value: Math.round(Math.random()*1000)},

{name: '遂宁市',value: Math.round(Math.random()*1000)},

{name: '自贡市',value: Math.round(Math.random()*1000)},

{name: '黑河市',value: Math.round(Math.random()*1000)},

{name: '大兴安岭地区',value: Math.round(Math.random()*1000)},

{name: '哈尔滨市',value: Math.round(Math.random()*1000)},

{name: '齐齐哈尔市',value: Math.round(Math.random()*1000)},

{name: '牡丹江市',value: Math.round(Math.random()*1000)},

{name: '绥化市',value: Math.round(Math.random()*1000)},

{name: '伊春市',value: Math.round(Math.random()*1000)},

{name: '佳木斯市',value: Math.round(Math.random()*1000)},

{name: '鸡西市',value: Math.round(Math.random()*1000)},

{name: '双鸭山市',value: Math.round(Math.random()*1000)},

{name: '大庆市',value: Math.round(Math.random()*1000)},

{name: '鹤岗市',value: Math.round(Math.random()*1000)},

{name: '七台河市',value: Math.round(Math.random()*1000)},

{name: '酒泉市',value: Math.round(Math.random()*1000)},

{name: '张掖市',value: Math.round(Math.random()*1000)},

{name: '甘南藏族自治州',value: Math.round(Math.random()*1000)},

{name: '武威市',value: Math.round(Math.random()*1000)},

{name: '陇南市',value: Math.round(Math.random()*1000)},

{name: '庆阳市',value: Math.round(Math.random()*1000)},

{name: '白银市',value: Math.round(Math.random()*1000)},

{name: '定西市',value: Math.round(Math.random()*1000)},

{name: '天水市',value: Math.round(Math.random()*1000)},

{name: '兰州市',value: Math.round(Math.random()*1000)},

{name: '平凉市',value: Math.round(Math.random()*1000)},

{name: '临夏回族自治州',value: Math.round(Math.random()*1000)},

{name: '金昌市',value: Math.round(Math.random()*1000)},

{name: '嘉峪关市',value: Math.round(Math.random()*1000)},

{name: '普洱市',value: Math.round(Math.random()*1000)},

{name: '红河哈尼族彝族自治州',value: Math.round(Math.random()*1000)},

{name: '文山壮族苗族自治州',value: Math.round(Math.random()*1000)},

{name: '曲靖市',value: Math.round(Math.random()*1000)},

{name: '楚雄彝族自治州',value: Math.round(Math.random()*1000)},

{name: '大理白族自治州',value: Math.round(Math.random()*1000)},

{name: '临沧市',value: Math.round(Math.random()*1000)},

{name: '迪庆藏族自治州',value: Math.round(Math.random()*1000)},

{name: '昭通市',value: Math.round(Math.random()*1000)},

{name: '昆明市',value: Math.round(Math.random()*1000)},

{name: '丽江市',value: Math.round(Math.random()*1000)},

{name: '西双版纳傣族自治州',value: Math.round(Math.random()*1000)},

{name: '保山市',value: Math.round(Math.random()*1000)},

{name: '玉溪市',value: Math.round(Math.random()*1000)},

{name: '怒江傈僳族自治州',value: Math.round(Math.random()*1000)},

{name: '德宏傣族景颇族自治州',value: Math.round(Math.random()*1000)},

{name: '百色市',value: Math.round(Math.random()*1000)},

{name: '河池市',value: Math.round(Math.random()*1000)},

{name: '桂林市',value: Math.round(Math.random()*1000)},

{name: '南宁市',value: Math.round(Math.random()*1000)},

{name: '柳州市',value: Math.round(Math.random()*1000)},

{name: '崇左市',value: Math.round(Math.random()*1000)},

{name: '来宾市',value: Math.round(Math.random()*1000)},

{name: '玉林市',value: Math.round(Math.random()*1000)},

{name: '梧州市',value: Math.round(Math.random()*1000)},

{name: '贺州市',value: Math.round(Math.random()*1000)},

{name: '钦州市',value: Math.round(Math.random()*1000)},

{name: '贵港市',value: Math.round(Math.random()*1000)},

{name: '防城港市',value: Math.round(Math.random()*1000)},

{name: '北海市',value: Math.round(Math.random()*1000)},

{name: '怀化市',value: Math.round(Math.random()*1000)},

{name: '永州市',value: Math.round(Math.random()*1000)},

{name: '邵阳市',value: Math.round(Math.random()*1000)},

{name: '郴州市',value: Math.round(Math.random()*1000)},

{name: '常德市',value: Math.round(Math.random()*1000)},

{name: '湘西土家族苗族自治州',value: Math.round(Math.random()*1000)},

{name: '衡阳市',value: Math.round(Math.random()*1000)},

{name: '岳阳市',value: Math.round(Math.random()*1000)},

{name: '益阳市',value: Math.round(Math.random()*1000)},

{name: '长沙市',value: Math.round(Math.random()*1000)},

{name: '株洲市',value: Math.round(Math.random()*1000)},

{name: '张家界市',value: Math.round(Math.random()*1000)},

{name: '娄底市',value: Math.round(Math.random()*1000)},

{name: '湘潭市',value: Math.round(Math.random()*1000)},

{name: '榆林市',value: Math.round(Math.random()*1000)},

{name: '延安市',value: Math.round(Math.random()*1000)},

{name: '汉中市',value: Math.round(Math.random()*1000)},

{name: '安康市',value: Math.round(Math.random()*1000)},

{name: '商洛市',value: Math.round(Math.random()*1000)},

{name: '宝鸡市',value: Math.round(Math.random()*1000)},

{name: '渭南市',value: Math.round(Math.random()*1000)},

{name: '咸阳市',value: Math.round(Math.random()*1000)},

{name: '西安市',value: Math.round(Math.random()*1000)},

{name: '铜川市',value: Math.round(Math.random()*1000)},

{name: '清远市',value: Math.round(Math.random()*1000)},

{name: '韶关市',value: Math.round(Math.random()*1000)},

{name: '湛江市',value: Math.round(Math.random()*1000)},

{name: '梅州市',value: Math.round(Math.random()*1000)},

{name: '河源市',value: Math.round(Math.random()*1000)},

{name: '肇庆市',value: Math.round(Math.random()*1000)},

{name: '惠州市',value: Math.round(Math.random()*1000)},

{name: '茂名市',value: Math.round(Math.random()*1000)},

{name: '江门市',value: Math.round(Math.random()*1000)},

{name: '阳江市',value: Math.round(Math.random()*1000)},

{name: '云浮市',value: Math.round(Math.random()*1000)},

{name: '广州市',value: Math.round(Math.random()*1000)},

{name: '汕尾市',value: Math.round(Math.random()*1000)},

{name: '揭阳市',value: Math.round(Math.random()*1000)},

{name: '珠海市',value: Math.round(Math.random()*1000)},

{name: '佛山市',value: Math.round(Math.random()*1000)},

{name: '潮州市',value: Math.round(Math.random()*1000)},

{name: '汕头市',value: Math.round(Math.random()*1000)},

{name: '深圳市',value: Math.round(Math.random()*1000)},

{name: '东莞市',value: Math.round(Math.random()*1000)},

{name: '中山市',value: Math.round(Math.random()*1000)},

{name: '延边朝鲜族自治州',value: Math.round(Math.random()*1000)},

{name: '吉林市',value: Math.round(Math.random()*1000)},

{name: '白城市',value: Math.round(Math.random()*1000)},

{name: '松原市',value: Math.round(Math.random()*1000)},

{name: '长春市',value: Math.round(Math.random()*1000)},

{name: '白山市',value: Math.round(Math.random()*1000)},

{name: '通化市',value: Math.round(Math.random()*1000)},

{name: '四平市',value: Math.round(Math.random()*1000)},

{name: '辽源市',value: Math.round(Math.random()*1000)},

{name: '承德市',value: Math.round(Math.random()*1000)},

{name: '张家口市',value: Math.round(Math.random()*1000)},

{name: '保定市',value: Math.round(Math.random()*1000)},

{name: '唐山市',value: Math.round(Math.random()*1000)},

{name: '沧州市',value: Math.round(Math.random()*1000)},

{name: '石家庄市',value: Math.round(Math.random()*1000)},

{name: '邢台市',value: Math.round(Math.random()*1000)},

{name: '邯郸市',value: Math.round(Math.random()*1000)},

{name: '秦皇岛市',value: Math.round(Math.random()*1000)},

{name: '衡水市',value: Math.round(Math.random()*1000)},

{name: '廊坊市',value: Math.round(Math.random()*1000)},

{name: '恩施土家族苗族自治州',value: Math.round(Math.random()*1000)},

{name: '十堰市',value: Math.round(Math.random()*1000)},

{name: '宜昌市',value: Math.round(Math.random()*1000)},

{name: '襄樊市',value: Math.round(Math.random()*1000)},

{name: '黄冈市',value: Math.round(Math.random()*1000)},

{name: '荆州市',value: Math.round(Math.random()*1000)},

{name: '荆门市',value: Math.round(Math.random()*1000)},

{name: '咸宁市',value: Math.round(Math.random()*1000)},

{name: '随州市',value: Math.round(Math.random()*1000)},

{name: '孝感市',value: Math.round(Math.random()*1000)},

{name: '武汉市',value: Math.round(Math.random()*1000)},

{name: '黄石市',value: Math.round(Math.random()*1000)},

{name: '神农架林区',value: Math.round(Math.random()*1000)},

{name: '天门市',value: Math.round(Math.random()*1000)},

{name: '仙桃市',value: Math.round(Math.random()*1000)},

{name: '潜江市',value: Math.round(Math.random()*1000)},

{name: '鄂州市',value: Math.round(Math.random()*1000)},

{name: '遵义市',value: Math.round(Math.random()*1000)},

{name: '黔东南苗族侗族自治州',value: Math.round(Math.random()*1000)},

{name: '毕节地区',value: Math.round(Math.random()*1000)},

{name: '黔南布依族苗族自治州',value: Math.round(Math.random()*1000)},

{name: '铜仁地区',value: Math.round(Math.random()*1000)},

{name: '黔西南布依族苗族自治州',value: Math.round(Math.random()*1000)},

{name: '六盘水市',value: Math.round(Math.random()*1000)},

{name: '安顺市',value: Math.round(Math.random()*1000)},

{name: '贵阳市',value: Math.round(Math.random()*1000)},

{name: '烟台市',value: Math.round(Math.random()*1000)},

{name: '临沂市',value: Math.round(Math.random()*1000)},

{name: '潍坊市',value: Math.round(Math.random()*1000)},

{name: '青岛市',value: Math.round(Math.random()*1000)},

{name: '菏泽市',value: Math.round(Math.random()*1000)},

{name: '济宁市',value: Math.round(Math.random()*1000)},

{name: '德州市',value: Math.round(Math.random()*1000)},

{name: '滨州市',value: Math.round(Math.random()*1000)},

{name: '聊城市',value: Math.round(Math.random()*1000)},

{name: '东营市',value: Math.round(Math.random()*1000)},

{name: '济南市',value: Math.round(Math.random()*1000)},

{name: '泰安市',value: Math.round(Math.random()*1000)},

{name: '威海市',value: Math.round(Math.random()*1000)},

{name: '日照市',value: Math.round(Math.random()*1000)},

{name: '淄博市',value: Math.round(Math.random()*1000)},

{name: '枣庄市',value: Math.round(Math.random()*1000)},

{name: '莱芜市',value: Math.round(Math.random()*1000)},

{name: '赣州市',value: Math.round(Math.random()*1000)},

{name: '吉安市',value: Math.round(Math.random()*1000)},

{name: '上饶市',value: Math.round(Math.random()*1000)},

{name: '九江市',value: Math.round(Math.random()*1000)},

{name: '抚州市',value: Math.round(Math.random()*1000)},

{name: '宜春市',value: Math.round(Math.random()*1000)},

{name: '南昌市',value: Math.round(Math.random()*1000)},

{name: '景德镇市',value: Math.round(Math.random()*1000)},

{name: '萍乡市',value: Math.round(Math.random()*1000)},

{name: '鹰潭市',value: Math.round(Math.random()*1000)},

{name: '新余市',value: Math.round(Math.random()*1000)},

{name: '南阳市',value: Math.round(Math.random()*1000)},

{name: '信阳市',value: Math.round(Math.random()*1000)},

{name: '洛阳市',value: Math.round(Math.random()*1000)},

{name: '驻马店市',value: Math.round(Math.random()*1000)},

{name: '周口市',value: Math.round(Math.random()*1000)},

{name: '商丘市',value: Math.round(Math.random()*1000)},

{name: '三门峡市',value: Math.round(Math.random()*1000)},

{name: '新乡市',value: Math.round(Math.random()*1000)},

{name: '平顶山市',value: Math.round(Math.random()*1000)},

{name: '郑州市',value: Math.round(Math.random()*1000)},

{name: '安阳市',value: Math.round(Math.random()*1000)},

{name: '开封市',value: Math.round(Math.random()*1000)},

{name: '焦作市',value: Math.round(Math.random()*1000)},

{name: '许昌市',value: Math.round(Math.random()*1000)},

{name: '濮阳市',value: Math.round(Math.random()*1000)},

{name: '漯河市',value: Math.round(Math.random()*1000)},

{name: '鹤壁市',value: Math.round(Math.random()*1000)},

{name: '大连市',value: Math.round(Math.random()*1000)},

{name: '朝阳市',value: Math.round(Math.random()*1000)},

{name: '丹东市',value: Math.round(Math.random()*1000)},

{name: '铁岭市',value: Math.round(Math.random()*1000)},

{name: '沈阳市',value: Math.round(Math.random()*1000)},

{name: '抚顺市',value: Math.round(Math.random()*1000)},

{name: '葫芦岛市',value: Math.round(Math.random()*1000)},

{name: '阜新市',value: Math.round(Math.random()*1000)},

{name: '锦州市',value: Math.round(Math.random()*1000)},

{name: '鞍山市',value: Math.round(Math.random()*1000)},

{name: '本溪市',value: Math.round(Math.random()*1000)},

{name: '营口市',value: Math.round(Math.random()*1000)},

{name: '辽阳市',value: Math.round(Math.random()*1000)},

{name: '盘锦市',value: Math.round(Math.random()*1000)},

{name: '忻州市',value: Math.round(Math.random()*1000)},

{name: '吕梁市',value: Math.round(Math.random()*1000)},

{name: '临汾市',value: Math.round(Math.random()*1000)},

{name: '晋中市',value: Math.round(Math.random()*1000)},

{name: '运城市',value: Math.round(Math.random()*1000)},

{name: '大同市',value: Math.round(Math.random()*1000)},

{name: '长治市',value: Math.round(Math.random()*1000)},

{name: '朔州市',value: Math.round(Math.random()*1000)},

{name: '晋城市',value: Math.round(Math.random()*1000)},

{name: '太原市',value: Math.round(Math.random()*1000)},

{name: '阳泉市',value: Math.round(Math.random()*1000)},

{name: '六安市',value: Math.round(Math.random()*1000)},

{name: '安庆市',value: Math.round(Math.random()*1000)},

{name: '滁州市',value: Math.round(Math.random()*1000)},

{name: '宣城市',value: Math.round(Math.random()*1000)},

{name: '阜阳市',value: Math.round(Math.random()*1000)},

{name: '宿州市',value: Math.round(Math.random()*1000)},

{name: '黄山市',value: Math.round(Math.random()*1000)},

{name: '巢湖市',value: Math.round(Math.random()*1000)},

{name: '亳州市',value: Math.round(Math.random()*1000)},

{name: '池州市',value: Math.round(Math.random()*1000)},

{name: '合肥市',value: Math.round(Math.random()*1000)},

{name: '蚌埠市',value: Math.round(Math.random()*1000)},

{name: '芜湖市',value: Math.round(Math.random()*1000)},

{name: '淮北市',value: Math.round(Math.random()*1000)},

{name: '淮南市',value: Math.round(Math.random()*1000)},

{name: '马鞍山市',value: Math.round(Math.random()*1000)},

{name: '铜陵市',value: Math.round(Math.random()*1000)},

{name: '南平市',value: Math.round(Math.random()*1000)},

{name: '三明市',value: Math.round(Math.random()*1000)},

{name: '龙岩市',value: Math.round(Math.random()*1000)},

{name: '宁德市',value: Math.round(Math.random()*1000)},

{name: '福州市',value: Math.round(Math.random()*1000)},

{name: '漳州市',value: Math.round(Math.random()*1000)},

{name: '泉州市',value: Math.round(Math.random()*1000)},

{name: '莆田市',value: Math.round(Math.random()*1000)},

{name: '厦门市',value: Math.round(Math.random()*1000)},

{name: '丽水市',value: Math.round(Math.random()*1000)},

{name: '杭州市',value: Math.round(Math.random()*1000)},

{name: '温州市',value: Math.round(Math.random()*1000)},

{name: '宁波市',value: Math.round(Math.random()*1000)},

{name: '舟山市',value: Math.round(Math.random()*1000)},

{name: '台州市',value: Math.round(Math.random()*1000)},

{name: '金华市',value: Math.round(Math.random()*1000)},

{name: '衢州市',value: Math.round(Math.random()*1000)},

{name: '绍兴市',value: Math.round(Math.random()*1000)},

{name: '嘉兴市',value: Math.round(Math.random()*1000)},

{name: '湖州市',value: Math.round(Math.random()*1000)},

{name: '盐城市',value: Math.round(Math.random()*1000)},

{name: '徐州市',value: Math.round(Math.random()*1000)},

{name: '南通市',value: Math.round(Math.random()*1000)},

{name: '淮安市',value: Math.round(Math.random()*1000)},

{name: '苏州市',value: Math.round(Math.random()*1000)},

{name: '宿迁市',value: Math.round(Math.random()*1000)},

{name: '连云港市',value: Math.round(Math.random()*1000)},

{name: '扬州市',value: Math.round(Math.random()*1000)},

{name: '南京市',value: Math.round(Math.random()*1000)},

{name: '泰州市',value: Math.round(Math.random()*1000)},

{name: '无锡市',value: Math.round(Math.random()*1000)},

{name: '常州市',value: Math.round(Math.random()*1000)},

{name: '镇江市',value: Math.round(Math.random()*1000)},

{name: '吴忠市',value: Math.round(Math.random()*1000)},

{name: '中卫市',value: Math.round(Math.random()*1000)},

{name: '固原市',value: Math.round(Math.random()*1000)},

{name: '银川市',value: Math.round(Math.random()*1000)},

{name: '石嘴山市',value: Math.round(Math.random()*1000)},

{name: '儋州市',value: Math.round(Math.random()*1000)},

{name: '文昌市',value: Math.round(Math.random()*1000)},

{name: '乐东黎族自治县',value: Math.round(Math.random()*1000)},

{name: '三亚市',value: Math.round(Math.random()*1000)},

{name: '琼中黎族苗族自治县',value: Math.round(Math.random()*1000)},

{name: '东方市',value: Math.round(Math.random()*1000)},

{name: '海口市',value: Math.round(Math.random()*1000)},

{name: '万宁市',value: Math.round(Math.random()*1000)},

{name: '澄迈县',value: Math.round(Math.random()*1000)},

{name: '白沙黎族自治县',value: Math.round(Math.random()*1000)},

{name: '琼海市',value: Math.round(Math.random()*1000)},

{name: '昌江黎族自治县',value: Math.round(Math.random()*1000)},

{name: '临高县',value: Math.round(Math.random()*1000)},

{name: '陵水黎族自治县',value: Math.round(Math.random()*1000)},

{name: '屯昌县',value: Math.round(Math.random()*1000)},

{name: '定安县',value: Math.round(Math.random()*1000)},

{name: '保亭黎族苗族自治县',value: Math.round(Math.random()*1000)},

{name: '五指山市',value: Math.round(Math.random()*1000)}

]

};

option.legend = {

x:'right',

data:['居民建档数']

};

option.dataRange = {

orient: 'horizontal',

x: 'right',

min: 0,

max: 1000,

color:['orange','yellow'],

text:['高','低'], // 文本，默认为数值文本

splitNumber:0

};

myChart.setOption(option, true);//显示省地图

});

//选择地级市的单击事件

myChart.on(echarts.config.EVENT.CLICK, function (param){

var seriesName=param.seriesName;

if(seriesName.trim()=="居民建档数"||seriesName.trim()==""){//由于全国地图和省地图都要触发这个事件，所以要判断是省还是地级市

alert(param.name);//地级市的名字

}

});

</script>

</body>

</html>

下面看效果：

特别注意：echarts地图显示对于html的编码还是jsp的编码只支持utf-8，否则地图会变形出现乱码。

附件是对应的html显示地图的例子，以及jQuery切换城市的一个控件。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

VeryCD截止期内未获视听许可证关站风险加大
主管部门网站上曾显示VeryCD申请视听许可证的许可日期是3月4日，这让外界解读为3月4日是审批最后期限网易科技讯 3月5日凌晨消息，昨日(3月4日)是电驴下载网站VeryCD申请视听许可证的截止日期，VeryCD创始人黄一梦告诉昨日网易科技，目前还未获得许可证。这使得VeryCD因无证…...
2024/4/24 23:52:36
CSS——样式表；选择器；优先级
在HTML中加入样式表：【type=”text/css”】将style对象的type属性设置为“text/css”是允许不支持这类型的浏览器忽略样式表单。外部样式表：【要求/推荐使用：方便后期维护以及修改，并可以重复使用在多个网页。】有两种方式： 1、在Web文档的段使用<link>标记,讲一…...
2024/4/14 20:56:41
Android Studio3.5 xml文件格式化(Reformat Code)后元素会自动排序的问题
升级到Android Studio3.5 后，发现在xml文件使用Reformat Code时元素会自动排序。首先怀疑是配置文件的问题，但是删了配置文件后，重新打开还是一样。马上找了另外两台机子，同样升级到Android Studio3.5，发现出现同样的问题。接着去官网看更新的blog，没有发现有帮助的信息…...
2024/4/26 14:55:16
PythonStock（19）：使用supervisor做docker的ENTRYPOINT切入点启动
关于使用Python开发一个股票项目。项目地址： https://github.com/pythonstock/stock 相关资料： http://blog.csdn.net/freewebsys/article/details/78294566 主要使用开发语言是python。使用的lib库是pandas，tushare，TensorFlow，tornado等。本文的原文连接是…...
2024/4/14 20:56:39
Linux下安装软件命令详解
----------------------------------------------------------------或许你对于linux还不够了解，但是一旦你步入公司后，你就会发现linux是无处不在，好多东西都是基于于其它服务器（Linux,HP……）相连接来操作一系列的工作，而离不开的就是用命令来操作一切了，下面我就说说…...
2024/4/14 20:56:38
智慧树英语交流视听
网课知到app智慧树英语交流视听说单元测试答案第一章单元测试1、材料:没有题目1、请根据听力材料回答问题1（请点击题干中图标听问题1）A:When he applied to study film at the University of Illinois.B:When he competed for available roles on Broadway.C:When he board…...
2024/4/14 20:56:38
绘图工具——绘制地图
案例: 绘制中国主要城市pm值对应图需要下载: pip install echarts-countries-pypkg pip install echarts-china-provinces-pypkg pip install echarts-china-cities-pypkg pip install echarts-china-counties-pypkgfrom pyecharts import Geodata = [("海门", 9),(…...
2024/4/14 20:56:36
使用jdom来格式化输入xml
今天无意中听同事说到格式化输出xml代码，于是一时兴起，就写了一个小工具，使用了jdom，可以到jdom官方网站http://www.jdom.org/下载。具体代码如下： import java.util.List;import org.jdom.Attribute; import org.jdom.Document; import org.jdom.Element; import org.jd…...
2024/4/19 13:52:05
CSS 表格制作日历
看看最后的效果 css 的样式代码如下所示<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">table.ca1 {border-collapse: separate;border-spacing: 0;text-align: center;…...
2024/4/14 20:56:34
linux系统的磁盘添加分区格式化与分区挂载
1.添加一块硬盘sdb，使用fdisk /dev/sdb进行分区2.磁盘第一个主分区大小2G . 3.磁盘第二个主分区大小2G4.第三个主分区，使用硬盘剩下所有空间5.分区后的详细信息如下：6.使用mke2fs命令对/dev/sdb1进行格式化7.使用mke2fs命令对/dev/sdb2进行格式化8.使用mke2fs命令对/dev/sdb…...
2024/4/14 20:56:33
EntryPoint API
<span style="font-size:24px;"> class EntryPoint 管理一个单独的进入指针。此为进入hmm树中的节点的指针。本类的属性：final Unit baseUnit;目标单元一般为发音的第一个单元。final Node baseNode; 基本节点，为目标节点 final Map<Unit, Node>…...
2024/4/14 20:56:32
Linux添加新硬盘并分区格式化
在服务器上把硬盘接好，启动linux，以root登陆。比如我新加一块SCSI硬盘，需要将其分成三个区：执行fdisk -l命令显示当前系统的硬盘设备. # fdisk -l#fdisk /dev/sdb进入fdisk模式：Command (m for help):p //查看新硬盘的分区Command (m for help):n //创建新分区可以用m…...
2024/4/20 16:41:08
css样式，如何处理嵌套的表格边框
表格table嵌套，边框合并问题外层table与内层table嵌套，内外表格都需边框时，设置“border=1”，但边框会重复，造成某些地方边框粗，有些地方边框细的问题。解决办法：外表格样式：<table border="1" cellspacing="0" cellpadding="0"…...
2024/4/14 20:56:32
如何基于谷歌地图的Server缓存发布Image Service服务
如何基于谷歌地图的Server缓存发布Image Service服务第一步：下载地图数据下载安装水经注万能地图下载器，启动时只选择电子.谷歌（这里可以根据自己的需要选择），如下图所示。找到成都后框选下载成都区域，如下图所示。双击新建任务，选择1到19级，如下图所示。第二步：导…...
2024/4/24 23:52:35
php 简单xml格式封装数据方法
1.本地服务器创建文件test.php <?php public static function xml(){$xml="<?xml version 1.0 encoding=UTF-8 ?>";//版本号和编码$xml .="<root>";//根节点标签$xml .="<code>200</code>";$xml .="<mes…...
2024/4/24 23:52:37
英语钻石法则(五)-----听说并进：讲故事
英语钻石法则（五）-----听说并进：讲故事获取视频: https://yunpan.cn/cBcz5FMimnNi6 密码: d4ea亲，在钻石法则之二（点击打开）中，我们交流过，没有必要专门的学习语法，也许你还在想“天哪，那我该怎么学英语，怎么正确的应用语法”，今天我将进一步的和你分享，怎…...
2024/4/24 23:52:33
精通CSS+DIV 网页样式与布局完整pdf扫描版
随着web 2.0的大潮席卷而来，网页标准化css+div的设计方式正逐渐取代传统的表格布局模式，对css的学习也成为设计人员的必修课。下面小编提供大家的是精通CSS+DIV 网页样式与布局的下载，需要的朋友们可以下载试试吧！精通CSS+DIV 网页样式与布局本书系统地讲解了css层迭样式表…...
2024/4/24 23:52:36
indent工具，将代码格式化成内核代码的格式
Command：indent -kr -i8 test.c indent工具可以把代码格式化成某种风格，以上命令就是把代码格式化成linux内核代码的风格。 -kr 选项表示K&R风格 -i8 选项表示缩进8个空格的长度如果没有使用-nut选项，则每8个缩进空格会自动用一个Tab代替...
2024/4/24 23:52:31
保存XML文件时如何保证其内容带有XML格式？（Framework2.0版本及以上）
我们在将xml数据保存到文件的时候，可能会遇到如何将保存的xml文件中的内容保存为有格式化的形式，而不是将xml数据保存为一个长长的字符串？因为我们如果不是简单地查看Xml，而是需要对其内容进行修改的时候，如果内容没有格式化的话，那么修改起来简直就如同噩梦一般，但是，…...
2024/4/24 23:52:31
用R绘制带省界和省会的中国地图
首先你得从网上下载中国地图和省会城市的shapefile文件，很多地方提供下载。代码：## install.packages(maptools) # 还没安装maptools的执行此语句 library(maptools) library(rgdal) str.crs <- " +proj=longlat +datum=WGS84 +no_defs +ellps=WGS84 +towgs84=0,0,0&…...
2024/4/24 23:52:29

echarts显示地图以及jQuery地域选择器插件

相关文章

最新文章