Echarts地图颜色等相关解析

  Echarts是一款开源、功能强大的数据可视化产品。之前做图表一直都是使用Highcharts来做的，Echarts与Highcharts大致用法差不多，最近用到了Echarts的地图功能，把官网上的两个例子整合了一下终于达到了要求。贴出来跟大家分享一下。另附上新疆各市县经纬度js文件一份(xjGeoCoord.js)

先来晒一个效果图吧

下面就来看一下代码如果实现

一、引用的css与js

[html]  view plain  copy

1. <link rel="shortcut icon" href="asset/ico/favicon.png">   
2. <link href="asset/css/font-awesome.min.css" rel="stylesheet">  
3. <link href="asset/css/bootstrap.css" rel="stylesheet">  
4. <link href="asset/css/carousel.css" rel="stylesheet">   
5. <link href="asset/css/echartsHome.css" rel="stylesheet">   
6. <link href="asset/css/codemirror.css" rel="stylesheet">   
7. <link href="asset/css/monokai.css" rel="stylesheet">   
8.   
9. <script src="asset/js/jquery.min.js"></script>  
10. <script src="asset/js/echartsHome.js" type="text/javascript"></script>   
11. <script src="asset/js/bootstrap.min.js"></script>  
12. <script src="asset/js/codemirror.js"></script>  
13. <script src="asset/js/javascript.js"></script>   
14. <script src="asset/js/echartsConfig.js"></script>   
15. <script src="www/js/echarts.js"></script> <script src="www/js/chart/geoCoord.js"></script>  

二、html部分，用于地图展示和top5相关信息展示

[html]  view plain  copy

1. <div class="row-fluid" style="height:600px;position:relative;">  
2.     <div id="mapContainer"    
3.                     style="position: absolute; height: 100%; width: 90%; background-color: transparent; cursor: default;text-align:left">  
4.              无相关数据  
5.     </div>  
6.     <div id="pieChart" style="position:relative;z-index:1;height:100%;padding-right:0.5em;width:30%;float:right">  
7.         <ol class="rectangle-list">  
8.             <li>  
9.                 <div>  
10.                     克拉玛依:1.1.1.1(626)  
11.                 </div>  
12.             </li>  
13.             <li>  
14.                 <div>  
15.                     乌鲁木齐:22.2.2.2(855)                                
16.                 </div>  
17.             </li>  
18.             <li>  
19.                 <div>                        
20.                     库尔勒:3.3.3.3(755)  
21.                 </div>  
22.             </li>  
23.             <li>  
24.                 <div>  
25.                     天山:4.4.4.4(755)  
26.                 </div>  
27.             </li>                
28.         </ol>  
29.     </div>  
30. </div>  

三、自己写的css与js部分及功能注释

[css]  view plain  copy

1. <style type="text/css">  
2.               
3.             ol{  
4.                 counter-reset: li;  
5.                 list-style: none;  
6.                 *list-style: decimal;  
7.                 font: 15px 'trebuchet MS', 'lucida sans';  
8.                 padding: 0;  
9.                 margin-bottom: 4em;  
10.                 text-shadow: 0 1px 0 rgba(255,255,255,.5);  
11.             }  
12.   
13.             ol ol{  
14.                 margin: 0 0 0 2em;  
15.             }  
16.   
17.               
18.   
19.             .rectangle-list div{  
20.                 position: relative;  
21.                 display: block;  
22.                 padding: .4em .4em .4em .8em;  
23.                 *padding: .4em;  
24.                 margin: .5em 0 .5em 2.5em;  
25.                 background: #F0F0F0;  
26.                 color: #444;  
27.                 text-decoration: none;  
28.                 -webkit-transition: all .3s ease-out;  
29.                 -moz-transition: all .3s ease-out;  
30.                 -ms-transition: all .3s ease-out;  
31.                 -o-transition: all .3s ease-out;  
32.                 transition: all .3s ease-out;     
33.             }  
34.   
35.             .rectangle-list div:hover{  
36.                 background: #eee;  
37.             }     
38.   
39.             .rectangle-list div:before{  
40.                 content: counter(li);  
41.                 counter-increment: li;  
42.                 position: absolute;   
43.                 left: -2.5em;  
44.                 top: 50%;  
45.                 margin-top: -1em;  
46.                 background: #FE0902; --序号背景色  
47.                 height: 2em;  
48.                 width: 2em;  
49.                 line-height: 2em;  
50.                 text-align: center;  
51.                 font-weight: bold;  
52.             }  
53.               
54.             .rectangle-list div:after{  
55.                 position: absolute;   
56.                 content: '';  
57.                 border: .5em solid transparent;  
58.                 left: -1em;  
59.                 top: 50%;  
60.                 margin-top: -.5em;  
61.                 -webkit-transition: all .3s ease-out;  
62.                 -moz-transition: all .3s ease-out;  
63.                 -ms-transition: all .3s ease-out;  
64.                 -o-transition: all .3s ease-out;  
65.                 transition: all .3s ease-out;                 
66.             }  
67.   
68.             .rectangle-list div:hover:after{  
69.                 left: -.5em;  
70.                 border-left-color: #FE0902;               
71.             }  
72.           
73. </style>  

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.     var option;  
3.     var maxRange = 1000;  
4.     $(function(){  
5.         option = {  
6.             title : {  
7.                 text: '新疆',  
8.                 x:'center'  
9.             },  
10.             tooltip : {  
11.                 trigger: 'item',  
12.                 formatter:function(param){//提示信息格式化  
13.                     return "<b>"+param.data.name+"</b><br/>数量："+param.data.value;  
14.                 }  
15.             },  
16.             legend: {  
17.                 orient: 'vertical',//图例位置  
18.                 x:'left',  
19.                 data:['']//图例文本信息  
20.             },  
21.             dataRange: {  
22.                 min : 0,//值域控件最小值  
23.                 max : maxRange,//值域控件最大值  
24.                 calculable : true,//默认为false,设置为true时值域显示为线性渐变  
25.                 precision:0,//小数精度，默认为0  
26.                 color: ['red', 'orange', 'yellow','#FFFCEC']//值域颜色，最少两个  
27.             },  
28.             toolbox: {//图表工具  
29.                 show : true,    //是否展示  
30.                 //布局方式，默认为水平布局，水平(vertical)|垂直(horizontal)  
31.                 orient : 'horizontal',  
32.                 //横向位置，可选为：'center' | 'left' | 'right' | {number}(x坐标，单位px)  
33.                 x: 'left',  
34.                 //纵向位置可选为：'top' | 'bottom' | 'center' | {number}(y坐标，单位px)   
35.                 y: 'top',  
36.                 feature : {  
37.                     mark : {show: true},    //辅助线  
38.                     dataView : {show: false, readOnly: false},  //数据视图  
39.                     restore : {show: true}, //还原  
40.                     saveAsImage : {show: true}  //保存为图片  
41.                 }  
42.             },  
43.             series : [  
44.                 {  
45.                     name: 'pm2.5',  
46.                     type: 'map',  
47.                     mapType: '新疆',  //地图类型 china:中国；continent:世界  
48.                     hoverable: true,    //鼠标经过时，是否高亮显示  
49.                     roam:true,  
50.                     data : [ //区域编码是乱写的^_^,为了演示除name和value之外的属性如何取值;  
51.                         {name: '巴音郭楞蒙古自治州',value: 623,areaCode:11111},  
52.                         //{name: '和田地区',value: 425,areaCode:11112},  
53.                         {name: '哈密地区',value: 78,areaCode:11113},  
54.                         {name: '阿克苏地区',value: 384,areaCode:11114},  
55.                         {name: '阿勒泰地区',value:342,areaCode:11115},  
56.                         {name: '喀什地区',value: 109,areaCode:11116},  
57.                         //{name: '塔城地区',value: 526,areaCode:11117},  
58.                         {name: '昌吉回族自治州',value: 271,areaCode:11118},  
59.                         {name: '克孜勒苏柯尔克孜自治州',value: 98,areaCode:11119},  
60.                         {name: '吐鲁番地区',value:120,areaCode:11110},  
61.                         //{name: '伊犁哈萨克自治州',value: 451,areaCode:11120},  
62.                         {name: '博尔塔拉蒙古自治州',value: 239,areaCode:11121},  
63.                         {name: '乌鲁木齐市',value: 740,areaCode:11122},  
64.                         {name: '克拉玛依市',value: 122,areaCode:11123},  
65.                         //{name: '阿拉尔市',value: 432,areaCode:11124},  
66.                         {name: '图木舒克市',value: 170,areaCode:11125},  
67.                         //{name: '五家渠市',value: 250,areaCode:11126},  
68.                         //{name: '石河子市',value:193,areaCode:11127},  
69.                         {name: '那曲地区',value:127,areaCode:11128}  
70.                     ],  
71.                     itemStyle:{  
72.                         normal:{  
73.                             borderColor:'#A1DFF2',  //地图边界线颜色  
74.                             borderWidth:1,  //边界线宽度  
75.                             areaStyle:{  
76.                                 color:'white'  
77.                             },  
78.                             label:{  
79.                                 show:true  
80.                             }  
81.                         }  
82.                     },  
83.                     geoCoord: geoCoord  //地区经纬度  
84.                 },  
85.                 {//坐标标注  
86.                     type: 'map',  
87.                     mapType: '新疆',  
88.                     data : [],  
89.                     markPoint : {  
90.                         // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2  
91.                         symbolSize: 5,        
92.                         itemStyle: {  
93.                             normal: {   //地图内图形的默认样式和强调样式（悬浮时样式）  
94.                                 borderColor: 'orange',  
95.                                 borderWidth: 1,            // 标注边线线宽，单位px，默认为1  
96.                                 label: {  
97.                                     show: false  
98.                                 }  
99.                             },  
100.                             emphasis: { //地图内图形的强调样式（悬浮时样式）  
101.                                 borderColor: '#1e90ff',  
102.                                 borderWidth: 5,  
103.                                 label: {  
104.                                     show: false  
105.                                 }  
106.                             }  
107.                         },  
108.                         data : [  
109.                                 {name: "克拉玛依", value: 626,ipAddress:'1.1.1.1'},  
110.                                 {name: "乌鲁木齐", value: 855,ipAddress:'22.2.2.2'},                               
111.                                 {name: "库尔勒", value: 755,ipAddress:'3.3.3.3'},  
112.                                 {name: "天山", value: 755,ipAddress:'4.4.4.4'}  
113.                             ]  
114.                         }  
115.                 },  
116.                 {//向外发散光圈  
117.                     name: 'Top5',  
118.                     type: 'map',  
119.                     mapType: '新疆',  
120.                     data:[],  
121.                     markPoint : {  
122.                         symbol:'emptyCircle',  
123.                         symbolSize : function (v){  
124.                             //光圈大小,v代表节点的value值,可改为return 10+v*10/maxRange;  
125.                             return 10+v/100   
126.                         },  
127.                         effect : {  
128.                             show: true,  
129.                             shadowBlur : 0  
130.                         },  
131.                         itemStyle:{  
132.                             normal:{  
133.                                 label:{show:false   }  
134.                             }  
135.                         },  
136.                         tooltip:{//注：此处的tooltip必须放在data参数上面，才能生效  
137.                             formatter:function (param){  
138.                                 return "<b>"+param.data.name+"</b><br/>IP地址："+param.data.ipAddress+"("+param.data.value+")";  
139.                             }  
140.                         },  
141.                         data : [  
142.                                 {name: "克拉玛依", value: 626,ipAddress:'1.1.1.1'},  
143.                                 {name: "乌鲁木齐", value: 855,ipAddress:'22.2.2.2'},                               
144.                                 {name: "库尔勒", value: 755,ipAddress:'3.3.3.3'},  
145.                                 {name: "天山", value: 755,ipAddress:'4.4.4.4'}  
146.                             ]  
147.                         }  
148.                 }  
149.             ]  
150.         };    
151.         require.config({  
152.             paths: {  
153.                 echarts: 'www/js'  
154.             }  
155.         });  
156.         require(  
157.             [  
158.                 'echarts',  
159.                 'echarts/chart/map'  
160.             ],  
161.             DrawEChart  
162.         );  
163.     });  
164.                      
165.     //回调函数 渲染ECharts图表  
166.     function DrawEChart(ec) {  
167.   
168.     var chartContainer = document.getElementById("mapContainer");  
169.   
170.         //加载图表  
171.   
172.         var myChart = ec.init(chartContainer);  
173.         myChart.on(echartsConfig.EVENT.CLICK,echartsClick);//设置单击事件  
174.         myChart.setOption(option);  
175.   
176.     }  
177.   
178.     function echartsClick(param){  
179.         if(param.data.areaCode!=undefined){  
180.             alert(param.data.name+":"+param.data.areaCode);  
181.         }  
182.     }  
183.   
184.   
185. </script>  

四、实例下载地址：http://download.csdn.net/detail/zdx1515888659/9347593

五、在为Echarts设置主题时需要注意，只有内置主题（'macarons', 'infographic'）可以直接传入名称，其他的主题需要把主题包中对应的js文件开头和结尾有关封装的部分去掉，再使用setTheme(Object)方法来设置主题。