<template>
<div class="container">
  <div id="main" class="chart-container">dasd</div>
</div>
  
</template>

<script>
import * as echarts from "echarts";
import 'echarts-gl';
export default {
  data(){
    return {
        myChart:null,
    }
  },
  methods:{
    shapeChart(mapName,boundaryName){
        // 基于准备好的dom，初始化echarts实例
        if(!this.myChart){
            this.myChart = echarts.init(document.getElementById('main'));
        }
        // 指定图表的配置项和数据
        let option = {
            tooltip: {
                show: false,
                formatter: (params) => {
                    return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
                    <div class='tips' style="padding:0 12px;">
                        <h1 style='font-size:16px;'>${params.name}</h1>
                        <p style="font-size:14px;"><span style="opacity:0.75">办理人数：</span>22人</p>
                        <p style="font-size:14px;"><span style="opacity:0.75">待办人数：</span>22人</p>
                        <p style="font-size:14px;"><span style="opacity:0.75">办结人数：</span>22人</p>
                    </div>`;
                },
                borderColor: "#998484",
                borderWidth: 1,
                padding: [0, 0],
                backgroundColor: "#1B212B",
                borderRadius: 0,
                // textStyle: { color: "blue" },
            },
            visualMap: {
                show: false,
                min: 1, //指定 visualMapContinuous 组件的允许的最小值。
                max: 9, //指定 visualMapContinuous 组件的允许的最大值
                inRange: {
                    color: ["#074b4f"],
                },
                calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
            },
            series: [
                {
                    name: boundaryName,
                    type: "map3D",
                    map: boundaryName, //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
                    zlevel:1,
                    regionHeight: 1, //模型的高度
                    boxWidth: 100, //三维地图在三维场景中的宽度
                    //boxHeight:50,
                    boxDepth: 65, //三维地图在三维场景中的深度
                    label: {
                        show: false, //是否显示标签。
                    },
                    itemStyle: {
                        normal: {
                        // 静态模式下显示的默认样式
                            borderWidth: 2,
                            borderColor: "#1dc7c6",
                            color: [0,0,0,0],
                        }, //阴影效果
                        
                    },
                    emphasis: {
                            // 鼠标移上去的样式
                            borderWidth: 2,
                            borderColor: "#1dc7c6",
                            color: [0,0,0,0],
                            textStyle: {
                                // color:'blue'
                            },
                            label:{
                                show:false
                            },
                            itemStyle:{
                                color:[0,0,0,0]
                            }
                        },
                    viewControl: {
                        center:[0,0,0],//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        //用于鼠标的旋转，缩放等视角控制。
                        autoRotate: false, //是否开启视角绕物体的自动旋转查看
                        distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
                        alpha:65,//视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
                        beta:0,//视角绕 y 轴，即左右旋转的角度。
                        distance:120,//默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
                    },
                },
                {
                    name: mapName,
                    type: "map3D",
                    zlevel:2,
                    map: mapName, //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
                    regionHeight: 2, //模型的高度
                    boxWidth: 100, //三维地图在三维场景中的宽度
                    //boxHeight:50,
                    boxDepth: 65, //三维地图在三维场景中的深度
                    // top: "10%",
                    //left:'10%',
                    // 配置为垂直渐变的背景
                    // environment: 'images/53bg.png',
                    groundPlane:{
                        show:false
                    },
                    label: {
                        show: false, //是否显示标签。
                        position: ["50%", "50%"],
                        formatter: (params) => {
                            params.name;
                        },
                        textStyle: {
                            color: "rgba(255,255,255,0.65)", //地图初始化区域字体颜色
                            fontSize: 16,
                            opacity: 1,
                            backgroundColor: "#1B212B ",
                            borderColor: "#998484",
                            borderWidth: 1,
                            position: "insideTop",
                            padding: [6, 8],
                            borderRadius: 0,
                            distanca: 20,
                        },

                        // emphasis: {
                        //     //对应的鼠标悬浮效果
                        //     show: false,
                        //     // textStyle: { color: "blue" }
                        // },
                    },
                    itemStyle: {
                        normal: {
                        // 静态模式下显示的默认样式
                            borderWidth: 1,
                            borderColor: "#21cac7",
                            color: "#0e838b",
                        }, //阴影效果
                        emphasis: {
                            // 鼠标移上去的样式
                            borderWidth: 1.6,
                            borderColor: "#95FFFF",
                            color: "#108f97",
                            textStyle: {
                                // color:'blue'
                            },
                        },
                    },
                    viewControl: {
                        center:[0,0,0],//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        //用于鼠标的旋转，缩放等视角控制。
                        autoRotate: false, //是否开启视角绕物体的自动旋转查看
                        distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
                        alpha:65,//视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
                        beta:0,//视角绕 y 轴，即左右旋转的角度。
                        distance:120,//默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
                    },
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(option);
    },
    initChart(){
        let url = "/data/gd.json";
        let url1 = "/data/gd_item.json";
        let promiseArr = [];
        promiseArr.push(fetch(url).then(res=>res.json()))
        promiseArr.push(fetch(url1).then(res=>res.json()))
        Promise.allSettled(promiseArr).then((result)=>{
            //在echarts中注册地图矢量数据
            echarts.registerMap('gd',result[0].value);
            echarts.registerMap('gdItem',result[1].value);
            this.shapeChart('gd','gdItem');
        });
    }
  },
  created(){
  
  },
  mounted() {
    this.initChart();
  },
}
</script>

<style lang='stylus' scoped>
.container{
    display flex
    justify-content center
    align-content center
  }
  .chart-container{
      width 100%
      height 80vh
  }
</style>