<template>
    <div class="wgsl">
        <p class="title">陕西省不动产信息接入</p>
        <div class="map-box" ref="mapContainProvince" />
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            provinceName: "shanxi1",
            mapName: "陕西",
            listArr: [{
                name: '西安市',
                value: '6000'
            },
            {
                name: '宝鸡市',
                value: '8000'
            },
            {
                name: '咸阳市',
                value: '3000'
            },
            {
                name: '铜川市',
                value: '7000'
            },
            {
                name: '渭南市',
                value: '1000'
            },
            {
                name: '延安市',
                value: '2000'
            },
            {
                name: '榆林市',
                value: '600'
            },
            {
                name: '汉中市',
                value: '3000'
            },
            {
                name: '安康市',
                value: '1000'
            },
            {
                name: '商洛市',
                value: '1000'
            }], //城市json
            max: "9000", //最大value值
            min: "500", // 最小value值
        };
    },
    methods: {
        drawProvinceMap (provinceName, mapName) {
            this.provinceName = provinceName;
            this.mapName = mapName;
            // 引入区域数据
            require(`./map/${this.provinceName}.js`);
            let _this = this;
            let myChart8 = this.$echarts.init(this.$refs.mapContainProvince);
            const option = {
                visualMap: {
                    min: _this.min,
                    max: _this.max,
                    show: false,
                    inRange: {
                        color: ["lightskyblue"],
                    },
                },
                // 数据移入显示
                tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                        return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
                    },
                    // 边框颜色
                    borderColor: "#CB000C",
                    // 边框宽度
                    borderWidth: "1",
                },
                series: [
                    {
                        type: "map",
                        map: this.mapName,
                        itemStyle: {
                            normal: {  //正常状态
                                label: {
                                    show: true,
                                    formatter: '{b}',   //地图上显示的数据，分别对应data中的name和value
                                    color: '#fff',
                                },
                                areaColor: '#409EFF'   //地图区域的颜色
                            },
                            emphasis: {
                                label: { show: true },
                                areaColor: "#67C23A", //鼠标进入时的颜色
                            },
                        },
                        data: _this.listArr,
                    },
                ],
            };
            myChart8.setOption(option);
        },
    },
    mounted () {
        // 初始化数据
        this.drawProvinceMap("shanxi1", "陕西");
    }
}
</script>
<style scoped>
.wgsl {
    width: 100%;
}

.title {
    text-align: center;
    line-height: 36px;
    font-size: 20px;
    background: url("~@/image/title.png") no-repeat;
    width: 238px;
    height: 36px;
    margin: 0 auto;
    position: relative;
    top: -15px;
}

.map-box {
    display: inline-block;
    width: 100%;
    height: 75vh;
}
</style>