<template>
    <div :id="id" :style="{width: width,height:height}"></div>
</template>

<script>

    export default {
        props: {
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "300px",
            },
            id: {
                type: String,
                default: "id",
            },
            paddingleft: {
                type: String,
                default: "10%",
            },
        },
        data() {
            return {
                myChart: {},
                option: {},
            };
        },
        created: function () {

            let lists = [
                "浦东新区", "崇明区", "嘉定区", "金山区", "青浦区"
            ];
            let data = [];
            let itemStyle = {
                areaColor: '#0000ff',
                color: '#00ff00'
            };
            let label = {
                show: true,
                color: '#fff',
            };
            for (var i in lists) {
                let obj = {
                    name: lists[i],
                    itemStyle: itemStyle,
                    label: label,
                }
                data.push(obj);
            }
            function randomPieSeries(center, radius) {
                const data = ['A', 'B', 'C', 'D'].map((t) => {
                    return {
                        value: Math.round(Math.random() * 100),
                        name: 'Category ' + t
                    };
                });
                return {
                    type: 'pie',
                    coordinateSystem: 'geo',
                    tooltip: {
                        formatter: '{b}: {c} ({d}%)'
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    animationDuration: 0,
                    radius,
                    center,
                    data
                };
            }
            this.option = {
                title: {
                    text: '中国空气质量',
                    left: 'center'
                },

                tooltip: {
                    alwaysShowContent: true,     // 提示框总是显示（不再是鼠标离开就消失）
                    enterable: true,             // 允许提示框被点击
                    formatter: function (params) {
                        var value = params.value;
                        var a = '<br> <a href="http://www.baidu.com" style="color: red">查看详情</a>'
                        return params.name + ': ' + value[2] + a;
                    }
                },
                geo: {
                    map: '上海',
                    silent: true,
                    itemStyle: {
                        color: 'rgb(255,255,255,0.5)',
                        borderColor: 'rgb(54,192,118)'
                    },
                    regions: data,
                },
                series: [
                    /*{
                        zoom:1.2,
                        type: 'map',
                        map:"上海",
                        silent:true,
                        itemStyle:{
                            areaColor:'rgba(255,255,255,0.5)',
                            color:'#00ff00'
                        },
                        data:data,
                    },*/

                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: [
                            {
                                name: '崇明区',
                                value: [121.601351,31.615139, 32]
                            }
                        ]
                    }
                ],

            };
        },
        mounted: function () {
            //echarts.registerMap(that.area, geoJson);
            let json = require("./../common/map/310000.json");
            this.$echarts.registerMap("上海", json);
            this.myChart = this.$echarts.init(document.getElementById(this.id));
            this.myChart.setOption(this.option);
            //点击事件,根据点击某个省份计算出这个省份的数据
           /* let that = this;
            this.myChart.on('click', function (params) {
                console.log(params);
                that.$emit("mapclick", params);
            });
            this.myChart.on('mouseover', function (params) {
                console.log(params);
                that.$emit("mouseover", params);
            });*/
        }

    };
</script>

<style></style>