<template>
    <div class="map" id="map"></div>
</template>

<script>
import * as echarts from "echarts";
import jilin from "./json/jilin.json";
export default {
    data() {
        return {
            weatherMap: {
                // "qing": require('@/assets/tq__1.jpg'),
                // "qingZhuanDuoyun": require('@/assets/tq__2.jpg'),
                // "zhongyu": require('@/assets/tq__3.jpg'),
                // "qingZhuanZhongyu": require('@/assets/tq__4.jpg'),
                // "zhongxue": require('@/assets/tq__5.jpg'),
                // "leidian": require('@/assets/tq__6.jpg'),
                // "yin": require('@/assets/tq__7.jpg'),
                // "daxue": require('@/assets/tq__8.jpg'),
                // "qingZhuanYin": require('@/assets/tq__9.jpg'),
            },
            testData: [
                {
                    name: '长春市',
                    value: 'qing',
                    min: '10',
                    max: '20',
                    weather: '晴'
                },
                {
                    name: '吉林市',
                    value: 'qingZhuanDuoyun',
                    min: '11',
                    max: '15',
                    weather: '晴转多云'
                },
                {
                    name: '通化市',
                    value: 'zhongyu',
                    min: '8',
                    max: '12',
                    weather: '中雨'
                },
                {
                    name: '四平市',
                    value: 'qingZhuanZhongyu',
                    min: '9',
                    max: '19',
                    weather: '晴转中雨'
                },
                {
                    name: '白山市',
                    value: 'zhongxue',
                    min: '-15',
                    max: '-5',
                    weather: '中雪'
                },
                {
                    name: '辽源市',
                    value: 'leidian',
                    min: '13',
                    max: '17',
                    weather: '雷电'
                },
                {
                    name: '白城市',
                    value: 'yin',
                    min: '4',
                    max: '7',
                    weather: '阴'
                },
                {
                    name: '延边朝鲜族自治州',
                    value: 'daxue',
                    min: '-22',
                    max: '-12',
                    weather: '大雪'
                },
                {
                    name: '松原市',
                    value: 'qingZhuanYin',
                    min: '10',
                    max: '20',
                    weather: '晴转多云'
                }
            ]
        };
    },
    created() {

    },
    mounted() {
        this.drawMap()
    },
    methods: {
        drawMap() {
            // 判断地图是否渲染
            let myChart = echarts.getInstanceByDom(document.getElementById("map"))
            // 如果渲染则清空地图 
            if (myChart != null) {
                myChart.dispose()
            }
            // 初始化地图
            myChart = echarts.init(document.getElementById("map"));

            echarts.registerMap("jilin", jilin)

            let rich = {
                max: {
                    color: '#fff',
                    backgroundColor: '#E6A23C',
                    width: 44,
                    height: 26,
                },
                min: {
                    color: '#fff',
                    backgroundColor: '#67C23A',
                    width: 44,
                    height: 26,
                },
                name: {
                    color: '#F56C6C',
                    height: 32
                },
            }

            const weatherMap = this.weatherMap
            let tempData = this.testData
            tempData.forEach(item => {
                item.weatherImg = weatherMap[item.value]
                rich[item.value] = {
                    height: 26,
                    width: 26,
                    backgroundColor: {
                        image: weatherMap[item.value]
                    }
                }
            })

            var option = {
                series: [
                    {
                        type: 'map',
                        zoom: 1.2,
                        map: 'jilin',
                        label: {
                            show: true,
                            formatter: function (params) {
                                return `{${params.data.value}|}  {min|${params.data.min}℃}  {max|${params.data.max}℃}\n{name|${params.name}}`
                            },
                            rich: rich
                        },
                        data: tempData
                    },
                ]
            }

            myChart.setOption(option)

        },
    },
}
</script>

<style scoped>
.map {
    width: 800px;
    height: 600px;
    position: relative;
}
</style>
