[Echarts視覺化] 一.入門篇之簡單繪製中國地圖和貴州地區

Eastmount發表於2017-04-09
Echarts視覺化地圖

        最近發生了很多事情，去到了一個新環境學習。但是不論在哪裡，我都需要不忘初心，堅持做自己喜歡的事情，在CSDN寫部落格、教學、愛娜、生活等等。
        這篇文章主要是通過Echarts視覺化介紹入門知識、中國地圖和貴州地區各省份的資料分析。其中貴州地圖才是這篇文章的核心內容。這是一篇入門文章，希望對您有所幫助，如果文章中存在不足之處，還請海涵~
        官網地址：http://echarts.baidu.com/index.html


一. 入門介紹-第一張圖

        強烈推薦大家閱讀官網的教程進行學習，這裡的入門就參考官網內容了。
        官網地址：http://echarts.baidu.com/tutorial.html

        ECharts 特性介紹
        ECharts，一個純 Javascript 的圖表庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。

        ECharts 提供了常規的折線圖，柱狀圖，散點圖，餅圖，K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖，用於關係資料視覺化的關係圖，treemap，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。

        ECharts 3 中更是加入了更多豐富的互動功能以及更多的視覺化效果，並且對移動端做了深度的優化。ECharts 3 開始獨立出了“座標系”的概念，支援了直角座標系（catesian，同 grid）、極座標系（polar）、地理座標系（geo）。圖表可以跨座標系存在，例如折、柱、散點等圖可以放在直角座標系上，也可以放在極座標系上，甚至可以放在地理座標系中。

        Echarts入門程式碼
        ECharts 3 開始不再強制使用 AMD 的方式按需引入，程式碼裡也不再內建 AMD 載入器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標籤引入。
        1.首先下載最新的 echarts.min.js 檔案
        下載地址：http://echarts.baidu.com/download.html

        2.在Script中呼叫該檔案，核心程式碼格式如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 檔案 -->
    <script src="echarts.min.js"></script>
</head>
</html>
        3.繪製圖形
        下面程式碼參考我的文章：Echarts字型和線條顏色設定操作筆記
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>  
    <!-- 引入 echarts.js -->  
    <script src="echarts.min.js"></script>  
</head>  
  
<body>  
    <!-- 為ECharts準備一個具備大小的Dom -->  
    <div align="left" id="main" style="width: 900px;height:500px;"></div>  
    <script type="text/javascript">  
        //基於準備好的dom，初始化echarts例項  
        var myChart = echarts.init(document.getElementById('main'));  
     
        option = {  
            title: {  
                text: '2016年上半年全國規模以上工業企業用水情況（單位：億立方米）',   
                subtext: '資料來源：國家統計局',  
                x: 'center',  
            },  
            tooltip : {  
                trigger: 'axis',  
                axisPointer : {         
                    //座標軸指示器，座標軸觸發有效
                    //預設為直線，可選為：'line' | 'shadow'
                    type : 'shadow'           
                }  
            },  
            legend: {  
                orient: 'vertical',  
                x: 'left',  
                y:"top",  
                padding:50,     
                data: ['用水量', '減少量',]  
            },  
            grid: {  
                left: '10',  
                right: '60',  
                bottom: '3%',  
                height: '30%',    
                top: '20%',  
                containLabel: true  
            },  
            xAxis:  {  
                type: 'value',  
                //設定座標軸字型顏色和寬度  
                axisLine:{  
                    lineStyle:{  
                        color:'yellow',  
                        width:2  
                    }  
                },  
            },  
            yAxis: {  
                type: 'category',    
                axisLine:{  
                    lineStyle:{  
                        color:'yellow',  
                        width:2  
                    }  
                },  
                data: ['東部地區','中部地區','西部地區',]  
            },  
            series: [  
            {  
                name: '用水量',  
                type: 'bar',  
                stack: '總量',  
                label: {  
                    normal: {  
                        show: true,  
                        position: 'insidelift'  
                    }  
                },  
                data: [109.2, 48.2, 41 ]  
            },  
            {  
                name: '減少量',  
                type: 'bar',  
                stack: '總量',  
                label: {  
                    normal: {  
                        show: true,  
                        position: 'insidelift'  
                    }  
                },  
                data: [1.638, 1.0122, 1.025]  
            },  
        ]  
    };  
    myChart.setOption(option);  
    </script>  
</body>  
</html>
        執行結果如下圖所示：




二. 繪製中國地圖

        下面是繪製中國地圖的程式碼，網上非常常見，下面簡單介紹。
        官方模組地址：http://echarts.baidu.com/download-map.html


        然後下載中國地圖的JS或JSON檔案，檔名為china.js和china.json。
        程式碼如下，核心程式碼是獲取id為main的div模組：
        var chart = echarts.init(document.getElementById('main'));
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
   
</head>

<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
    <script>
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
    </script>
	</div>
</body>
</html>
        執行結果如下：


三. 繪製貴州地圖

        這是這篇文章的重點是繪製貴州相關的地圖，具體步驟如下。
        從官方下載貴州省的guizhou.js和guizhou.json檔案
        官方模組地址：http://echarts.baidu.com/download-map.html
        程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
   
</head>

<body>
    <!-- 為ECharts準備一個具備大小的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
	  <script src="guizhou.js"></script>
    <script>
     var myChart = echarts.init(document.getElementById('main'));
     var option = {
      title: {
       text : '貴州地圖',
       subtext : '各市區顯示'
      },
      series: [
        {
            name: '資料名稱',
        type: 'map',
        mapType: '貴州',
        selectedMode : 'single',
        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)},  
            ]
        }]
      };
     myChart.setOption(option);    
    </script>
	</div>
</body>
</html>
        執行結果如下所示，其中每個省份對應的市州可以在json檔案中查詢。

核心程式碼如下，它即可顯示貴州省地圖。
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
           text : '貴州地圖',
           subtext : '各市區顯示'
      },
      series: [
        {
            name: '資料名稱',
            type: 'map',
            mapType: '貴州',
            selectedMode : 'single',
            itemStyle:{
                 normal:{label:{show:true}},
                 emphasis:{label:{show:true}}
            }
        }]
      };
     myChart.setOption(option);  
</script>



四. 推薦地圖博文

        最後推薦一些文章作為線上筆記，全是一些地圖操作，希望對你有所幫助。
        1.官網地圖瀏覽：http://echarts.baidu.com/demo.html#map-province

        2.枯鴉專欄：百度Echarts 全國省市地圖 動態資料圖形報表
           程式媛專欄： ECHARTS-MAP的使用: 中國地圖及省份邊界的檢視



        3.hcy12321專欄：一個讓echarts中國地圖包含省市輪廓的技巧



        4.liuchonge專欄：Echarts使用二：全國地圖與各省市地圖聯動



        5.dhforsite專欄：echarts 某省下鑽某市地圖


        6.xianwen專欄：ECharts（中國地圖篇）的使用



        7.little2專欄：echarts3 使用總結




        風雪交加雨婆娑，
        琴瑟和鳴淚斑駁。
        不管在哪，依然做自己，
        娜美陪伴，愛還在，且更愛。謝謝，晚安~
        (By:Eastmount 2017-04-09 晚上12點  http://blog.csdn.net/eastmount/ )

相關文章