效果图

image.png

vue模板语法块

<template>
    <div class="mapDataDiv">
        <div class="mapTitle">代理商区域分析图</div>
        <div id="myChartChina" :style="{width: '100%', height: '600px'}"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
import china from '@/static/china'
export default {
    name: "mapData",
    mounted(){
        this.getAgenData();
    },
    methods:{
        init(mapData) {
            var myChartContainer = document.getElementById('myChartChina');
            var myChartChina = this.echarts.init(myChartContainer);
            this.echarts.registerMap('china', china)
            // 绘制图表
            var optionMap = {
                color:"burlywood",
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['']
                },
                visualMap: {
                    min: 0,
                    max: 10000,
                    left: '2%',
                    top: '50%',
                    text: ['高','低'],
                    calculable : true,
                    color:['#0b50b9','#c3e2f4']
                },
                selectedMode: 'single',
                series : [
                    {
                        name: '',
                        type: 'map',
                        mapType: 'china',
                        itemStyle: {
                            normal:{
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis:{
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        showLegendSymbol: true,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:mapData
                    }
                ]
            }
            myChartChina.setOption(optionMap);
        },


        /**
         * 代理商-区域分析图
         */
        getAgenData(){
            let param={
                queryType:"2"
            };
            
                this.init([{name: "北京",value: 3},{name: "湖北",value: 36},{name: "新疆",value: 63}]);
            
        }
    }
}
</script>