vue中使用echarts製作中國地圖

vue中echarts統計圖表之餅圖

vue中echarts之橫向柱狀統計圖

vue中echarts之常規柱狀統計圖

china.js文件免費下載

下面是如何使用echarts製作一箇中國地圖

效果圖：

詳細步驟

1.給定一下全局樣式、給個地圖容器

<div id="main"></div>

*{margin:0;padding:0}
html,body{
    width:100%;
    height:100%;
}
#main{
    width:600px;
    height:450px;
    margin: 150px auto;
    border:none;
}

2.引用echarts第三方插件

import echarts from 'echarts'
import 'echarts/map/js/china.js'

3.訂製樣式以及事件

option = {
    tooltip: {
        formatter:function(params,ticket, callback){
            return params.seriesName+'<br />'+params.name+'：'+params.value
        }//數據格式化
    },
    visualMap: {
        min: 0,
        max: 1500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],//取值範圍的文字
        inRange: {
            color: ['#fff4e6', '#dd2002']//取值範圍的顏色
        },
        show:true//圖注
    },
    geo: {
        map: 'china',
        roam: false,//不開啓縮放和平移
        zoom:1.23,//視角縮放比例
        label: {
            normal: {
                show: true,
                fontSize:'10',//注意：地圖省份名字字體如果過大會導致字體重疊
                color: 'rgba(0,0,0,0.7)'
            }
        },
        itemStyle: {
            normal:{
                borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis:{
                areaColor: '#F3B329',//鼠標選擇區域顏色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    },
    series : [
        {
            name: '信息量',
            type: 'map',
            geoIndex: 0,
            data:this.dataList
        }
    ]
}

4.獲取容器DOM，給定地圖配置

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

數據格式：

//這裏是中國各省人口數量（萬）

dataList:[
              {name: '南海諸島', value: 0},
              {name: '北京', value: 2170.7},
              {name: '天津', value: 1559.6},
              {name: '上海', value: 2423.78},
              {name: '重慶', value: 3048.43},
              {name: '河北', value: 7556.3},
              {name: '河南', value: 9605},
              {name: '雲南', value: 4800.5},
              {name: '遼寧', value: 4359.3},
              {name: '黑龍江', value: 3788.7},
              {name: '湖南', value: 6860.2},
              {name: '安徽', value: 6323.6},
              {name: '山東', value: 10047.2},
              {name: '新疆', value: 2444.67},
              {name: '江蘇', value: 8029.3},
              {name: '浙江', value: 5737},
              {name: '江西', value: 4622.1},
              {name: '湖北', value: 5917},
              {name: '廣西', value: 4885},
              {name: '甘肅', value: 2625.71},
              {name: '山西', value: 3702.35},
              {name: '內蒙古', value: 2534},
              {name: '陝西', value: 3835.44},
              {name: '吉林', value: 2717.43},
              {name: '福建', value: 3941},
              {name: '貴州', value: 3580},
              {name: '廣東', value: 11346},
              {name: '青海', value: 3983.8},
              {name: '西藏', value: 3371.5},
              {name: '四川', value: 8341},
              {name: '寧夏', value: 681.79},
              {name: '海南', value: 925.76},
              {name: '臺灣', value: 2369},
              {name: '香港', value: 748.25},
              {name: '澳門', value: 63.2}
]

 

visualMap：圖注樣式定製，其中包括color範圍，文字提示

geo:定義地圖爲china，其中可能大概率要用的一個配置zoom: 視角縮放比例，roam：是否開啓縮放和平移

itemStyle：地圖外觀定製，其中normal表示正常顯示的樣式，emphasis表示鼠標懸浮下樣式

series：整體配置   其中type很關鍵 表示該例是地圖，data:圖表所用數據，實際項目中大家可以通過http獲取數據，再賦值給data

整體代碼如下：

<template>
    <div class="animated fadeIn" style="background-color: white">
        <Row>
            <div id="main"></div>
        </Row>
    </div>
</template>
<script>
    import echarts from 'echarts'
    import 'echarts/map/js/china.js'
    export default {
        name: "map",
        data () {
            return {
                dataList:[
              {name: '南海諸島', value: 0},
              {name: '北京', value: 2170.7},
              {name: '天津', value: 1559.6},
              {name: '上海', value: 2423.78},
              {name: '重慶', value: 3048.43},
              {name: '河北', value: 7556.3},
              {name: '河南', value: 9605},
              {name: '雲南', value: 4800.5},
              {name: '遼寧', value: 4359.3},
              {name: '黑龍江', value: 3788.7},
              {name: '湖南', value: 6860.2},
              {name: '安徽', value: 6323.6},
              {name: '山東', value: 10047.2},
              {name: '新疆', value: 2444.67},
              {name: '江蘇', value: 8029.3},
              {name: '浙江', value: 5737},
              {name: '江西', value: 4622.1},
              {name: '湖北', value: 5917},
              {name: '廣西', value: 4885},
              {name: '甘肅', value: 2625.71},
              {name: '山西', value: 3702.35},
              {name: '內蒙古', value: 2534},
              {name: '陝西', value: 3835.44},
              {name: '吉林', value: 2717.43},
              {name: '福建', value: 3941},
              {name: '貴州', value: 3580},
              {name: '廣東', value: 11346},
              {name: '青海', value: 3983.8},
              {name: '西藏', value: 3371.5},
              {name: '四川', value: 8341},
              {name: '寧夏', value: 681.79},
              {name: '海南', value: 925.76},
              {name: '臺灣', value: 2369},
              {name: '香港', value: 748.25},
              {name: '澳門', value: 63.2}
]
}
         },
        methods: {
            buildMap(){
                let myChart = echarts.init(document.getElementById('main'));
                let option = {
                    tooltip: {
                        formatter:function(params,ticket, callback){
                            return params.seriesName+'<br />'+params.name+'：'+params.value
                        }//數據格式化
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高','低'],//取值範圍的文字
                        inRange: {
                            color: ['#fff4e6', '#dd2002']//取值範圍的顏色
                        },
                        show:true//圖注
                    },
                    geo: {
                        map: 'china',
                        roam: false,//不開啓縮放和平移
                        zoom:1.23,//視角縮放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize:'10',//注意：地圖省份名字字體如果過大會導致字體重疊
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal:{
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis:{
                                areaColor: '#F3B329',//鼠標選擇區域顏色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series : [
                        {
                            name: '信息量',
                            type: 'map',
                            geoIndex: 0,
                            data:this.dataList
                        }
                    ]
                };
                myChart.setOption(option);
            }
        },
        mounted() {
            this.buildMap()
        }
    }
</script>

<style scoped>
    *{margin:0;padding:0}
    html,body{
        width:100%;
        height:100%;
    }
    #main{
        width:600px;
        height:450px;
        margin: 150px auto;
        border:none;
    }
</style>