<template>
    <div class="container">
        <div id="EMiddleMap" style="height:100%;"></div>
    </div>
</template>

<script>
export default {
    name: "EMiddleMap",
    data() {
        return {
            data: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("EMiddleMap")
            );
            let option = {
                tooltip: {
                    formatter: function (params) {
                        if (params.value) {
                            return (
                                params.name +
                                "<br>" +
                                params.value[0] +
                                params.value[1]
                            );
                        }
                    },
                    textStyle: {
                        fontSize: 25,
                        color: "#fff",
                    },
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 600,
                    inRange: {
                        color: ["#e0ffff", "#006edd"],
                    },
                    calculable: true,
                },
                // geo3D: {
                //     itemStyle: {
                //         borderColor: "#333",
                //         borderWidth:2
                //     }
                // },
                series: [
                    {
                        name: "长兴县",
                        type: "map3D",
                        map: "长兴县",
                        data: [{ name: "吕山乡", value: ["数量：", 422290] }],
                        regionHeight: 4,
                        boxWidth: 120,
                        // top: "10%",
                        // bottom: "10%",
                        boxDepth: 120,
                        regionHeight: 5,
                        // environment: new this.$echarts.graphic.LinearGradient(
                        //     0,
                        //     0,
                        //     0,
                        //     1,
                        //     [
                        //         {
                        //             offset: 0,
                        //             color: "#547EE0",
                        //         },
                        //         {
                        //             offset: 0.5,
                        //             color: "#57AEE0",
                        //         },
                        //         {
                        //             offset: 0.7,
                        //             color: "#162661",
                        //         },
                        //         {
                        //             offset: 1,
                        //             color: "#162661",
                        //         },
                        //     ],
                        //     false
                        // ),
                        label: {
                            show: true,
                            formatter: function (params) {
                                var content = "",
                                    content = params.name;
                                return content;
                            },
                            textStyle: {
                                color: "#FFFFFF",
                                fontWeight: "normal",
                                fontSize: 20,
                                backgroundColor: "rgba(0, 0, 0, 0)",
                            },
                            emphasis: {
                                //鼠标悬浮效果
                                show: true,
                                textStyle: { color: "#f00" },
                            },
                        },
                        itemStyle: {
                            // normal: { borWidth: 15 },
                            emphasis: {
                                color: "#F5D747",
                                color: "#54FAF0",
                                // borderType: "solid",
                                // borderColor: "#f00",
                                // borderWidth: 10,
                                areaColor: '#f00',
                            shadowOffsetX: 50,
                            shadowOffsetY: 0,
            //                 shadowBlur: 20,
            //                 borderWidth: 0,
            //                 shadowColor: "rgba(0, 0, 0, 0.5)",
                            }, //地图板块鼠标悬浮颜色
                            color: "#04438C",
                            opacity: 1,
                            borderWidth: 5,
                            borderColor: "#0393C0",
                        },
                        viewControl: {
                            autoRotate: false, // 自动旋转
                            // distance: 115,
                            distance: 130,
                        },
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

<style lang="scss" scoped>
</style>