echarts地圖引入json或者js

時間 2019-11-12

標籤 echarts 地圖引入 json 或者欄目 JavaScript 简体版

原文原文鏈接

因爲echarts3.0地圖數據暫停服務了，今天臨時要修改一個地區的地圖，可把我給忙活了javascript

echarts的例子上提供了引入js顯示地圖、引入json數據顯示地圖兩種方式，下面簡單介紹下這兩種引入方式html

添加一個div，設置寬度和高度用來顯示地圖java

<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 500px;height:400px;"></div>
</body>

1.經過js方式，顯示地圖jquery

引入hunan.js，mapType：湖南，這樣就能夠顯示湖南省的地圖了json

 1 <script src="../echarts/echarts.min.js"></script>
 2     <script src="../echarts/jquery-1.10.2.min.js"></script>
 3     <script src="../echarts/hunan.js"></script>
 4     <script type="text/javascript">
 5     
 6     var myChart = echarts.init(document.getElementById('main'));
 7     
 8     option = {
 9             title : {
10                 text: 'iphone銷量',
11                 subtext: '純屬虛構',
12                 x:'center'
13             },
14             tooltip : {
15                 trigger: 'item'
16             },
17             legend: {
18                 orient: 'vertical',
19                 x:'left',
20                 data:['iphone3','iphone4','iphone5']
21             },
22             dataRange: {
23                 min: 0,
24                 max: 2500,
25                 x: 'left',
26                 y: 'bottom',
27                 text:['高','低'],           // 文本，默認爲數值文本
28                 calculable : true
29             },
30             toolbox: {
31                 show: true,
32                 orient : 'vertical',
33                 x: 'right',
34                 y: 'center',
35                 feature : {
36                     mark : {show: true},
37                     dataView : {show: true, readOnly: false},
38                     restore : {show: true},
39                     saveAsImage : {show: true}
40                 }
41             },
42             roamController: {
43                 show: true,
44                 x: 'right',
45                 mapTypeControl: {
46                     'yueyang': true
47                 }
48             },
49             series: [
50                      {
51                          name: '地市名稱',
52                          type: 'map',
53                          mapType: '湖南', /* // 自定義擴展圖表類型 */
54                          roam: false,
55                          label:{
56                              normal: {
57                               show: true,
58                           },
59                              emphasis: {
60                                  show: true,
61                              }
62                          },
63                          itemStyle: {
64                              normal: {
65                                  borderWidth: 0.2,/* //區域邊框寬度 */
66                               borderColor: '#009fe8',/* //區域邊框顏色 */
67                               areaColor:"#ffefd5"
68                              },
69                              emphasis: {
70                                  areaColor: '#FFFFFF',
71                              }
72                          },
73                          showLegendSymbol:true,
74                          data:[
75                               {name: '岳陽市', value: 430600},
76                               {name: '樓區', value: 430602},
77                               {name: '云溪區', value: 430603},
78                               {name: '開發區', value: 430604},
79                               {name: '君山', value: 430611},
80                               {name: '岳陽縣', value: 430621},
81                               {name: '華容縣', value: 430623},
82                               {name: '湘陰縣', value: 430624},
83                               {name: '平江縣', value: 430626},
84                               {name: '汨羅市', value: 430681},
85                               {name: '臨湘市', value: 430682},
86                               {name: '屈原', value: 430683}
87                           ],
88                      } 
89                  ]
90         };
91     
92     /* $.get('../echarts/yueyang.json', function (chinaJson) {
93         echarts.registerMap('岳陽', chinaJson);
94         myChart.setOption(
95             option
96         );
97     }); */
98     myChart.setOption(option);
99     </script>

2.經過json方式，顯示地圖echarts

這裏以岳陽市爲例，經過引入json數據，地圖顯示岳陽市地圖iphone

一樣，這裏mapType:岳陽，而且spa

echarts.registerMap('岳陽', chinaJson);

<script src="../echarts/echarts.min.js"></script>
    <script src="../echarts/jquery-1.10.2.min.js"></script>
    <!-- <script src="../echarts/hunan.js"></script> -->
    <script type="text/javascript">
    
    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: {
                    'yueyang': true
                }
            },
            series: [
                     {
                         name: '地市名稱',
                         type: 'map',
                         mapType: '岳陽', /* // 自定義擴展圖表類型 */
                         roam: false,
                         label:{
                             normal: {
                              show: true,
                          },
                             emphasis: {
                                 show: true,
                             }
                         },
                         itemStyle: {
                             normal: {
                                 borderWidth: 0.2,/* //區域邊框寬度 */
                              borderColor: '#009fe8',/* //區域邊框顏色 */
                              areaColor:"#ffefd5"
                             },
                             emphasis: {
                                 areaColor: '#FFFFFF',
                             }
                         },
                         showLegendSymbol:true,
                         data:[
                              {name: '岳陽市', value: 430600},
                              {name: '樓區', value: 430602},
                              {name: '云溪區', value: 430603},
                              {name: '開發區', value: 430604},
                              {name: '君山', value: 430611},
                              {name: '岳陽縣', value: 430621},
                              {name: '華容縣', value: 430623},
                              {name: '湘陰縣', value: 430624},
                              {name: '平江縣', value: 430626},
                              {name: '汨羅市', value: 430681},
                              {name: '臨湘市', value: 430682},
                              {name: '屈原', value: 430683}
                          ],
                     } 
                 ]
        };
    
    $.get('../echarts/yueyang.json', function (chinaJson) {
        echarts.registerMap('岳陽', chinaJson);
        myChart.setOption(
            option
        );
    }); 
    //myChart.setOption(option);
    </script>