数据可视化项目---客源分布图

最终效果如下

点击省份之后，如点击四川：

客源分布图—组件代码

<!--客源地图分布-->
<template>
    <div class="com-container" @dblclick="revertMap">
        <div class="com-chart" ref="map_ref"></div>
    </div>
</template>

<script>
    import {getProvinceMapInfo} from '../utils/map_utils'
    export default {
        name: "Map",
        data() {
            return {
                chartInstance:null,
                allData:null,
                mapData:{},//所获取的省份的地图矢量数据
            }
        },
        mounted(){
            this.initChart();
            this.getData();
            window.addEventListener('resize',this.screenAdapter);
            //在页面加载完成后，主动进行屏幕的适配
            this.screenAdapter();
        },
        destroy(){
            //在组件销毁的时候，将窗口监听器取消掉
            window.removeEventListener('resize',this.screenAdapter);
        },
        methods: {
            //初始化echartInstance对象
            async initChart(){
                this.chartInstance=this.echarts.init(this.$refs.map_ref,'chalk');
                //获取中国地图的矢量数据
                await this.axios.get('http://localhost:8080/static/map/china.json').then(res=>{
                    this.echarts.registerMap('china',res.data);
                });
                const initOption={
                    title:{
                        text:'┃ 客源分布',
                        left:20,
                        top:20,
                    },
                    geo:{
                        type:'map',
                        map:'china',
                        top:'5%',
                        bottom:'5%',
                        itemStyle:{
                            areaColor:'#2E72BF',
                            borderColor:'#333'
                        }
                    },
                    legend:{
                        left:'5%',
                        bottom:'5%',
                        orient:'vertical'
                    },
                };
                this.chartInstance.setOption(initOption);
                //地图点击事件的监听
                this.chartInstance.on('click',async arg=>{
                    //arg.name 得到所点击的省份,这个省份是中文
                    const provinceInfo=getProvinceMapInfo(arg.name);
                    //判断当前点击的这个省份的地图矢量数据在mapData中是否存在
                    if (!this.mapData[provinceInfo.key]) {
                        //省份信息不存在
                        //获取当前省份的地图矢量数据
                        await this.axios.get('http://localhost:8080'+provinceInfo.path).then(res=>{
                            //缓存省份地图矢量数据
                            this.mapData[provinceInfo.key]=res.data;
                            //重新注册地图，显示地图
                            this.echarts.registerMap(provinceInfo.key,res.data);
                        });
                    }
                    const changeOption={
                        geo:{
                            map:provinceInfo.key
                        }
                    };
                    this.chartInstance.setOption(changeOption);
                });
            },
            //获取服务器数据
            async getData(){
                await this.axios.get("/chart/map").then(res=>{
                    this.allData=res.data;
                });
                this.updateChart();
            },
            //更新图表
            updateChart(){
                //处理图表需要的数据
                const legendArr = this.allData.map(item=>{
                    return item.name;
                });
                const seriesArr = this.allData.map(item=>{
                   // return的这个对象就代表的是一个类别下所有的散点数据
                   //如果想在地图中显示散点的数据，我们需要给散点的图表增加一个配置，coordinateSystem:'geo'
                   return {
                       type:'effectScatter',
                       //坐标涟漪效果
                       rippleEffect:{
                         scale:5,
                         brushType:'stroke',
                       },
                       name:item.name,
                       data:item.children,
                       coordinateSystem:'geo'
                   }
                });
                const dataOption={
                    legend:{
                        data:legendArr,
                    },
                    series:seriesArr,
                };
                this.chartInstance.setOption(dataOption);
            },
            //当浏览器的大小发生变化的时候，调用该方法，来完成屏幕的适配
            screenAdapter(){
                //和分辨率大小相关的配置项
                const titleFontSize=this.$refs.map_ref.offsetWidth/100*3.6;
                const adapterOption={
                    //标题文字的大小
                    title: {
                        textStyle:{
                            fontSize:titleFontSize,
                        }
                    },
                    //图例大小
                    legend:{
                        itemWidth:titleFontSize/2,
                        itemHeight:titleFontSize/2,
                        itemGap:titleFontSize/2,
                        textStyle:{
                            fontSize:titleFontSize/2,
                        }
                    }
                };
                this.chartInstance.setOption(adapterOption);
                //手动的调用图表的resize方法
                this.chartInstance.resize();
            },
            //回到中国地图
            revertMap(){
                const revertOption={
                    geo:{
                        map:'china'
                    }
                };
                this.chartInstance.setOption(revertOption);

            },
        }
    }

</script>

<style scoped>
    .com-container{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    .com-chart{
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
    }
</style>

客源分布图—接口坐标数据

JSON

[ { "name": "黄金用户", "children": [ { "name": "武汉", "value": [114.31, 30.52] }, { "name": "丹东", "value": [124.37, 40.13] }, { "name": "张家口", "value": [114.87, 40.82] }, { "name": "深圳", "value": [114.07, 22.62] } ] }, { "name": "白金用户", "children": [ { "name": "金华", "value": [119.64, 29.12] }, { "name": "西安", "value": [108.95, 34.27] } ] }, { "name": "砖石用户", "children": [ { "name": "成都", "value": [104.06, 30.67] } ] } ]

地图矢量数据的问题—map.json

中国和所有省份的地图坐标JSON数据

客源分布图—设计流程

参考https://blog.csdn.net/liudachu/article/details/109273102

下一篇：数据可视化项目—地区销量排行