Echarts地图

<div class="vip_main_box">
    <div class="vip_search_box f_s_b">
        <ul class="vip_search_list f_s ">
            <li class="f_s">
                <div class="search_item_tit">
                    访问时段：
                </div>
                <div class="search_item_con">
                    <el-select placeholder="请选择" v-model="time_type" size="small" clearable >
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                    </el-select>
                </div>
            </li>
            <li class="margin_left_b">
                <div class="vip_common_btn vip_submit_btn vip_add_btn" @click="search()">查询</div>
            </li>
        </ul>
    </div>
    <div class="f_s_b margin_top_m" style="padding: 0 30px">
        <div class="a_blue"  >
            <a v-if="show_china" class="a_blue" @click="showChinaMap"><<返回全国地图</a>
        </div>
    </div>
    <div class="margin_top_b  chart_warp" ref="map_chart" id="map_chart" style="width: 1600px;height:800px;">
    </div>
    <div class="margin_top_b  chart_warp" ref="line_chart" style="width: 1600px;height: 800px;">
	</div>
</div>

// 引入基本模板
let echarts = require('echarts/lib/echarts');
// echarts.registerMap('china', china)
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require("echarts/lib/chart/map");
require("echarts/map/js/china.js");
require("echarts/map/json/province/shanxi.json");
require("echarts/map/json/province/shanxi1.json");

export default {
	data() {
		return {
			provinces: ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'],
			provincesText: ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'],
			map :{},
			//记录进入的省级地图名称
			province: '',
			options:[
			    {
			        value:'1',
			        label:'最近一周'
			    },
			    {
			        value:'2',
			        label:'最近一个月'
			    },
			    {
			        value:'3',
			        label:'最近三个月'
			    },
			    {
			        value:'4',
			        label:'最近半年'
			    },
			],
			
	        time_type:'1',
	        /*横坐标数据*/
	        row_data:[],
	        /*纵坐标数据*/
	        col_data:[],
	        //顶部数据
	        top_list:{},
	        //底部数据
	        bottom_list:{},
	
	        //顶部数据
	        tmpSeriesData:[],
	
	        option:[
	            {name: '中西区', value: 0},
	            {name: '湾仔', value: 15477.48},
	            {name: '东区', value: 31686.1},
	            {name: '南区', value: 6992.6},
	            {name: '油尖旺', value: 44045.49},
	            {name: '深水埗', value: 40689.64},
	            {name: '九龙城', value: 37659.78},
	            {name: '黄大仙', value: 45180.97},
	            {name: '观塘', value: 55204.26},
	            {name: '葵青', value: 21900.9},
	            {name: '荃湾', value: 4918.26},
	            {name: '屯门', value: 5881.84},
	            {name: '元朗', value: 4178.01},
	            {name: '北区', value: 2227.92},
	            {name: '大埔', value: 2180.98},
	            {name: '沙田', value: 9172.94},
	            {name: '西贡', value: 3368},
	            {name: '离岛', value: 806.98}
	        ],
	        show_china:false,
	
	        bs_province:[],
	        bs_province_code:[],
	        province_code:""
	    }
	},
	methods: {
	    tableRowClassName({
	                          row,
	                          rowIndex
	                      }) {
	        if (rowIndex % 2 == 1) {
	            return 'height-row';
	        }
	        return '';
	    },
	    //地图参数配置
	    getMapOpt(place){
	        let option = { // 进行相关配置
	            title: {
	                text: '用户分布图',
	                subtext: '用户分布数据来源于邦顺咨询',
	                left: 'center',
	                top: 30,
	                textStyle:{fontSize: 20}
	            },
	            tooltip: {
	                trigger: 'item',
	                formatter: '{b}<br/>{c} (用户)'
	            }, // 鼠标移到图里面的浮动提示框
	
	            toolbox: {
	                show: true,
	                orient: 'vertical',
	                left: 'right',
	                top: 'center',
	                /*feature: {
	                    dataView: {readOnly: false},
	                    restore: {},
	                    saveAsImage: {}
	                }*/
	            },
	            visualMap: {
	                min: 0,
	                max: 100,
	                text: ['High', 'Low'],
	                realtime: false,
	                inRange: {
	                    color: ['lightskyblue', 'yellow', 'orangered']
	                }
	            },
	            dataRange: {
	                show: false,
	                min: 0,
	                max: 1000,
	                text: ['High', 'Low'],
	                realtime: true,
	                calculable: true,
	                color: ['orangered', 'yellow', 'lightskyblue']
	            },
	            geo: { // 这个是重点配置区
	                map: place?place:'china', // 表示中国地图
	                roam: false,
	                label: {
	                    normal: {
	                        show: true, // 是否显示对应地名
	                        textStyle: {
	                            color: 'rgba(0,0,0)',
	                        }
	                    }
	                },
					layoutCenter: ['50%', '50%'],
					layoutSize: 800,
	                itemStyle: {
	                    normal: {
							areaColor: '#77ccee',
	                        borderColor: 'rgba(0, 0, 0, 0.5)'
	                    },
	                    emphasis: {
	                        areaColor: null,
	                        shadowOffsetX: 0,
	                        shadowOffsetY: 0,
	                        shadowBlur: 20,
	                        borderWidth: 0,
	                        shadowColor: 'rgba(0, 0, 0, 0.5)'
	                    },
						
	                }
	            },
	
	            series: [{
	                type: 'scatter',
	                coordinateSystem: 'geo' // 对应上方配置
	            },
	                {
	                    name:"用户分布",
	                    type: 'map',
	                    roam: false,
	                    geoIndex: 0,
	                    data: this.tmpSeriesData,
	                },
	            ],
	        };
	        return option
	    },
	    //用于在省级地图,点击空白处返回全国地图,这里要根据自己的业务数据来判断是否返回
	    showChinaMap(){
	        this.map.dispose();
	        this.draw(1);
	        this.show_china = false;
	    },
	
	    //显示各省地图
	    getProvinceMap(province,province_code){
	        console.log(province,'省份')
	        console.log(province_code,'省份代码')
	        this.show_china = true;
	        const appData = require("echarts/map/json/province/"+province+".json");
	        echarts.registerMap(province, appData);  //注册省级地图
	        this.draw(2,province_code,province);
	    },
	
	    //初始化地图
	    initMap(place) {
	        this.map = echarts.init(document.getElementById("map_chart"), 'chalk');
	        window.onresize = this.map.resize;
	        this.map.showLoading();   //加动画效果
	        let option = this.getMapOpt(place)
	        if (option && typeof option === "object") {
	            this.map.setOption(option, true);
	            setTimeout(() => {
	                this.map.hideLoading()
	            }, 500)
	        }
	        this.map.on('click', (param)=> {
	            event.stopPropagation()// 阻止冒泡
	            // 找到省份名
	            let provinceIndex = this.provincesText.findIndex(x=>{
	                return param.name ===x
	            });
	
	            let bs_provinceIndex = this.bs_province.findIndex(x=>{
	                return param.name ===x
	            });
	            if(provinceIndex===-1){
	                // 没找到省份名,代表进入到了市图层,这里可以放业务代码
	                return
	            }else{
	                this.map.dispose();
	                this.province = this.provinces[provinceIndex];
	                this.province_code = this.bs_province_code[bs_provinceIndex] ;
	                // 重新渲染各省份地图
	                this.getProvinceMap(this.province,this.province_code);
	            }
	        })
	
	    },
	
	    /**
	     *
	     * @param type 1全国 2 省份
	     * @param province_code 省份代码
	     * @param province 省份 shanxi
	     */
	    draw(type,province_code,province) {
	        this.$http.get(this.$api.userDistributeMap,{
				time_type: this.time_type,
				type: type,
				vip_type: this.vip_type,
				province: this.province,
				city: this.city,
				area: this.area,
				title: this.title
				}).then(res=>{
					// console.log(res, '++++++++')
	            if(res.data){
	                //获得顶部的数据
	                let data_item;
	                if(type == 1) {
	                    this.bs_province = [];
	                }
	                for(let i = 0;i<res.data.top_list.length;i++){
	                    if(type == 1){
	                        if(res.data.top_list[i].title == '内蒙'){
	                            this.bs_province.push('内蒙古');
	                        }else{
	                            this.bs_province.push(res.data.top_list[i].title);
	                        }
	                        this.bs_province_code.push(res.data.top_list[i].area_code);
	                    }
	                    data_item = {};
	                    if(res.data.top_list[i].title == '内蒙'){
	                        data_item.name = '内蒙古'
	                    }else{
	                        data_item.name = res.data.top_list[i].title;
	                    }
	                    data_item.value = res.data.top_list[i].num;
	                    this.tmpSeriesData.push(data_item);
	                }
	                this.initMap(province);
	                /*渲染底部数据*/
	                this.row_data = res.data.bottom_list.title;
	                this.col_data = res.data.bottom_list.num;
	                let myChart = echarts.init(this.$refs.line_chart);
	                myChart.setOption({
	                    legend: {
	                        data:['用户分布']
	                    },
	                    title: {
	                        text: '用户分布',
	                        left: 'center',
	                        top:"5%",
							left: "50%"
	                    },
	                    tooltip: {
	                        trigger: 'axis'
	                    },
	                    grid: {
	                        left: '5%',
	                        right: '4%',
	                        bottom: '10%',
	                        top:"13%",
	                        containLabel: true
	                    },
	                    toolbox: {
	
	                    },
	                    xAxis: {
	                        title:'地域',
	                        type: 'category',
	                        boundaryGap: false,
	                        data:this.row_data,
	                        axisLabel: {
	                            interval: 0, //横轴信息全部显示
	                        }
	                    },
	                    yAxis: {
	                        title:'访问量',
	                        type: 'value'
	                    },
	                    series: [{
	                        name:'用户访问',
	                        type:'bar',
	                        stack: '总量',
	                        data:this.col_data,
	                        barWidth : 20,
	                        itemStyle : {
	                            normal : {
	                                color:"#005ca9"
	
	                            }
	                        }
	                    },
	                    ]
	                });
	            }
	
	        }).catch(err=>console.log(err))
	    },
	
	    search(){
	        this.draw(1); //调用,
		},
	},
	mounted() {
		this.draw(1); //调用
	}
}