echarts绘制四川地图

1.效果图如下：
首先下载echarts-all.js。
代码如下：
 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 5 <title>四川地图显示</title>
 6 </head>
 7 <script type="text/javascript"    src="<?=$sRootPath?>js/mapJs/echarts-all.js"></script>
 8     <body>        
 9         <div id="main" style="height: 530px;"></div>
10         <script>
11         mapDisplay();
12         function mapDisplay() {
13             var myChart = echarts.init(document.getElementById('main'));
14             var option = {
15                 title: {
16                     text: '四川省区域注册人数统计',
17                     //subtext: '-。-'  //子标题
18                 },
19                 tooltip: {
20                     trigger: 'item',
21                     formatter: function(a){//鼠标移到某个州市上弹出的提示内容。包括显示样式可以自定义，利用return返回样式即可。
22                     return a[1]+":"+a[2];//a[1]:州市名称，a[2]:data中的valuez值。
23             }
24                 },
25 
26                 legend: {
27                     orient: 'vertical',
28                     x: 'right',
29                     data: ['数据名称']
30                 },
31                 
32                 dataRange: {
33                     min: 0,
34                     max: 1000,
35                     color: ['orange', '#6EA1F4'],
36                     //color: ['orange', 'blue'],
37                     boder: 3,
38                     text: ['高', '低'],           // 文本，默认为数值文本
39                     calculable: true
40                 },
41                 series: [
42                     {
43                         //name: '数据名称',
44                         type: 'map',
45                         mapType: '四川',//如果是其他省份，也可以改变，例如：上海，北京，天津等地。
46                         selectedMode: 'single',
47                         itemStyle: {
48                             normal: {
49                                 label: { show: true },
50                                 borderWidth: 2,//省份的边框宽度
51                                 childBorderWidth: 1,
52                                 childBorderColor: '#6EA1F4'
53                                 
54                             },
55                             emphasis: { label: { show: true } }
56                         },
57                         data: [
58                             { name: '阿坝藏族羌族自治州', value: 0 },
59                             { name: '巴中市', value: 0 },
60                             { name: '成都市', value: 0 },
61                             { name: '达州市', value: 0 },
62                             { name: '德阳市', value: 0 },
63                             { name: '甘孜藏族自治州', value: 0 },
64                             { name: '广安市', value: 0 },
65                             { name: '广元市', value: 0 },
66                             { name: '乐山市', value: 0 },
67                             { name: '凉山彝族自治州', value: 0 },
68                             { name: '泸州市', value: 0 },
69                             { name: '眉山市', value: 0 },
70                             { name: '绵阳市', value: 0 },
71                             { name: '内江市', value: 0 },
72                             { name: '南充市', value: 0 },
73                             { name: '攀枝花市', value: 0 },
74                             { name: '遂宁市', value: 0 },
75                             { name: '雅安市', value: 0 },
76                             { name: '宜宾市', value: 0 },
77                             { name: '资阳市', value: 0 },
78                             { name: '自贡市', value: 0 }
79                         ]
80                     }
81                 ]
82             };
83             myChart.setOption(option);
84         }
85         </script>
86     </body>
87 </html>
View Code
posted on 2016-01-06 17:07 彭立阅读(8099) 评论(0) 编辑收藏举报