echarts Map(地图) 不同区块显示

<template>
    <div class="map" id="s-map">
        <div id="chartMap" :style="{height:height,width:width}"></div>
    </div>
</template>
 
<script type="text/ecmascript-6">　　 // 在之前已经单独引入了echarts文件　　 // 在此只需引入需要的地区的json文件
    import echarts from "echarts";
    import gz from 'echarts/map/json/province/guizhou'

    import lianxi from '@/map/jiujiang.json'


     
    export default {
        components: {
        },
        data () {
            return {
                font: '12'
            }
        },
        props: {
            width: {
                type: String,
                default: '1000px'
            },
            height: {
                type: String,
                default: '500px'
            },
            
            nationCode: {
                type: String,
                default: '100000'
            },
            nationName: {
                type: String,
                default: '中华人民共和国'
            },
        },
        watch: {},
        data(){
            return{
                mapDatabase:{}
            }
        },
        created(){
            
        },
        mounted(){
            this.drawmap()
        },
        methods: {
            
            drawmap() {
                // if (condition) {
                    
                // }
                console.log(this.nationCode)
              this.$axios
                    .get("nation/getJson/" + this.nationCode)
                    .then(res => {
                        var data = res.data.data.data;
                        this.mapDatabase = JSON.parse(data)

                        let chartMap = document.getElementById('chartMap');
                        let smap = document.getElementById('s-map');　　　　　　　　　　
                        var resizeWorldMapContainer = function () {
                            chartMap.style.width  = smap.clientWidth +'px';
                            chartMap.style.height = smap.clientHeight + 'px';
                        };
                        resizeWorldMapContainer();
                        // 注册可用的地图
                        echarts.registerMap('dataSource',JSON.parse(data));
                        // echarts.registerMap('guizhou',lianxi);
                        let myChart = echarts.init(chartMap);
                        myChart.setOption({
                            title : {
                                text: this.nationName,
                                subtext: '火灾数量区域图',
                                x:'left'
                            },
                             tooltip: {
                                trigger: 'item',
                                formatter: '{b}<br/>{c} (p / km2)'
                            },
                            roam: false,
                            dataRange: {
                                show:true,
                                x: 'right',
                                y: 'bottom',
                                splitList: [
                                    {start: 1500},
                                    {start: 900, end: 1500},
                                    {start: 310, end: 1000},
                                    {start: 200, end: 300},
                                    {start: 10, end: 200, label: '10 到 200（火灾数量）'},
                                    {start: 5, end: 5, label: '5（火灾数量）', color: 'black'},
                                    {end: 10}
                                ],
                                color: ['#eee', '#949fb1', '#f3ce85']
                            },
                            // tooltip : {
                            //     trigger: 'item',
                            //     formatter: '{b}',
                            //     itemSize:'14px'
                            // },
                            legend: {
                                orient: 'vertical',
                                x:'center'
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'map',
                                    map: 'dataSource',
                                    mapType: 'maptype',
                                    roam: true,
                                    zoom: 0.6,
                                    itemStyle:{
                                        normal:{
                                            // areaColor: 'rgba(128, 128, 128, 0.01)',
                                            // borderWidth:1,
                                            // borderColor:'#999999',   
                                            label:{
                                                show:true,
                                                textStyle: {
                                                    color: '#2991BE',
                                                    fontSize: this.font
                                                }
                                            },
                                        },
                                        emphasis:{
                                            // areaColor: '#000',
                                            // borderWidth:1,
                                            // borderColor:'#999999',   
                                            label:{
                                                show:true,
                                                textStyle: {
                                                    color: '#398def',
                                                    fontSize: this.font
                                                }
                                            }
                                            
                                        }
                                    },
                                    data:[
                                        {name: '城口县',value: Math.round(Math.random()*2000)},
                                        {name: '开县',value: Math.round(Math.random()*2000)},
                                        {name: '巫溪县',value: Math.round(Math.random()*2000)},
                                        {name: '云阳县',value: Math.round(Math.random()*2000)},
                                        {name: '奉节县',value: Math.round(Math.random()*2000)},
                                        {name: '巫山县',value: Math.round(Math.random()*2000)},
                                        {name: '万州区',value: Math.round(Math.random()*2000)},
                                        {name: '梁平县',value: Math.round(Math.random()*2000)},
                                        {name: '忠县',value: Math.round(Math.random()*2000)},
                                        {name: '垫江县',value: Math.round(Math.random()*2000)},
                                        {name: '石柱土家族自治县',value: Math.round(Math.random()*2000)},
                                        {name: '丰都县',value: Math.round(Math.random()*2000)},
                                        {name: '长寿区',value: Math.round(Math.random()*2000)},
                                        {name: '涪陵区',value: Math.round(Math.random()*2000)},
                                        {name: '合川区',value: Math.round(Math.random()*2000)},
                                        {name: '潼南县',value: Math.round(Math.random()*2000)},
                                        {name: '铜梁县',value: Math.round(Math.random()*2000)},
                                        {name: '渝北区',value: Math.round(Math.random()*2000)},
                                        {name: '璧山县',value: Math.round(Math.random()*2000)},
                                        {name: '沙坪坝县',value: Math.round(Math.random()*2000)},
                                        {name: '江北区',value: Math.round(Math.random()*2000)},
                                        {name: '大足县',value: Math.round(Math.random()*2000)},
                                        {name: '永川区',value: Math.round(Math.random()*2000)},
                                        {name: '綦江县',value: Math.round(Math.random()*2000)},
                                        {name: '南川区',value: Math.round(Math.random()*2000)},
                                        {name: '万盛区',value: Math.round(Math.random()*2000)},
                                        {name: '大渡口区',value: Math.round(Math.random()*2000)},
                                        {name: '南岸区',value: Math.round(Math.random()*2000)},
                                        {name: '武隆县',value: Math.round(Math.random()*2000)},
                                        {name: '九龙坡区',value: Math.round(Math.random()*2000)},
                                        {name: '荣昌县',value: Math.round(Math.random()*2000)},
                                        {name: '秀山土家族苗族自治县',value: Math.round(Math.random()*2000)},
                                        {name: '酉阳土家族苗族自治县',value: Math.round(Math.random()*2000)},
                                        {name: '彭水苗族土家族自治县',value: Math.round(Math.random()*2000)},
                                        {name: '江津区',value: Math.round(Math.random()*2000)},
                                        {name: '北碚区',value: Math.round(Math.random()*2000)},
                                        {name: '巴南区',value: Math.round(Math.random()*2000)}
                                    ]
                                }
                            ]
                        });

                    });
                
                    window.addEventListener("resize", function(){
                        // resizeWorldMapContainer();
                        // myChart.resize();
                    })
            }
        },
        filters: {},
        computed: {},
       
        destroyed () {}
    }
</script>
 
<style lang="scss" scoped>
    @function px2rem($px) {
        $rem: 75px;
        @return ($px / $rem) + rem;
    }
</style>