vue+Echarts+3D

我是Echarts初学者，这是我通过vue简单做的小案列，正在钻研地图下钻三级，随后会更新下钻三级。

	import echtar from "echarts";
	import "echarts/map/js/china.js"; //引入中国数据地图
	import "echarts-gl";
	export default {
	  name: "echarts",
	  props: ["userJson"],
	  data() {
	    return {
	      chart: null,
	      Mapname:null,
	      pd:false
	    };
	  },
	  mounted() {
	    this.chinaConfigure();
	  },
	  beforeDestroy() {
	    if (!this.chart) {
	      return;
	    }
	    this.chart.dispose();
	    this.chart = null;
	  },
	  methods: {
	    chinaConfigure() {
	      let mychart = echtar.init( this.refs.myChina ); //获取容器所在的位置
	      window.onresize = mychart.resize；
	     /* mychart.on('click',function(t){-------省份绑定点击事件
	        this.pd=!this.pd;
	        this.$emit('sname',t.name)
	      }.bind(this))*/
    
      var convertData = function(data) {
        var res = []
        return res;
      };
      const options = { 
        textStyle: {
         fontFamily: 'KaiTi',
        },
        backgroundColor: 'rgba(0,0,0,0)', //背景颜色设置
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          x: "right",
          y: "bottom",
          show: false, //值域展示
          min: 0,
          max: 1000,
          text: ["高", "低"], //所得数值作为值域文字显示【高，低】
          realtime: true,
          calculable: false, //值域是否显示为线性渐变
          color: ["#003c77", "#6ba4e2"] //值域颜色标识
        },
        series: [
          {
            type: "map3D", // 系列类型
            map: "china", 
            label: {
                    show: true, // 是否显示省份标签 
                    textStyle: {// 标签的字体样式
                    color: "#000", // 地图初始化区域字体颜色
                    fontSize: 15, // 字体大小
                    opacity: 1, // 字体透明度
                    backgroundColor: "rgba(0,0,0,0)", // 字体背景色
                   }
                 },
            shading: 'color',
            itemStyle: {
              color: "#000",  // 地图板块的颜色
              opacity: 1,     // 图形的不透明度 [ default: 1 ]
              borderColor: '#5EEcf0',
              borderWidth: 1,
              areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                      offset: 1,
                      color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  }, {
                      offset: 1,
                      color: 'red' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
              },
              shadowColor: 'red',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            shading:'lambert',
            emphasis: {
              // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
              label: {
                show: true,
                textStyle: {
                  color: "#000", // 高亮时标签颜色变为 白色
                  fontSize: 15, // 高亮时标签字体 变大
                  fontFamily:'nomber' 
                }
              },
              itemStyle: {
                opacity: 1,
                color: "#fff" // 高亮时地图板块颜色改变
              }
            },
            light: {//光照效果
              main: { // 场景主光源的设置，在 globe 组件中就是太阳光。                color: "#fff", 
                intensity: 3, //主光源的强度。[ default: 1 ]
                shadow: false, //主光源是否投射阴影。默认关闭。   
                //shadowQuality: 'high',      
                alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
              },
              ambient: {
                // 全局的环境光设置。
                color: "#000", // 环境光的颜色
                intensity:3.5 // 环境光的强度
              }
            },
            viewControl: {//用于鼠标的旋转，缩放等视角控制。
              projection: "perspective", // 
              autoRotate: false, // 是否开启视角绕物体的自动旋转查看
              autoRotateDirection: "cw", // 。
              autoRotateSpeed: 10, // 物体自传的速度
              autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。
              damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞
              rotateSensitivity: 1, // 点击移动地图
              zoomSensitivity: 1, //调整缩放比例
              panSensitivity: 0, 
              panMouseButton: "right", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              rotateMouseButton: "right", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              distance: 92, //  地图大小调整
              minDistance: 40, // 
              maxDistance: 400, //  
              alpha: 70, // 视角绕 x 轴
              beta: 1, // 视角绕 y 轴
              center: [5,0, 0], // 视角中心点(x,y,z)
              animation: false, // 是否开启动画。
              animationDurationUpdate: 1000, // 过渡动画的时长
              animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。
            },
            data: [
                //东北三省
                {name:"黑龙江",regionHeight: 100, itemStyle: { color: '#2192ED' }}, //渲染省份颜色参数
                {name:"吉林",regionHeight: 100, itemStyle: { color: '#2192ED' }}, 
                {name:"辽宁",regionHeight: 100, itemStyle: { color: '#2192ED' }}, 
                //华东华南地区
                {name:"北京",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                {name:"天津",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                {name:"河北",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                {name:"山东",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                {name:"江苏",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                {name:"浙江",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                {name:"福建",regionHeight: 100, itemStyle: { color: '#0368BA' }},
                {name:"广东",regionHeight: 100, itemStyle: { color: '#0368BA' }},
                {name:"上海",regionHeight: 100, itemStyle: { color: '#0368BA' }},
                {name:"台湾",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                {name:"海南",regionHeight: 100, itemStyle: { color: '#0368BA' }}, 
                //中原地区
                {name:"山西",regionHeight: 100, itemStyle: { color: '#003366' }}, 
                {name:"河南",regionHeight: 100, itemStyle: { color: '#003366' }}, 
                {name:"湖北",regionHeight: 100, itemStyle: { color: '#003366' }}, 
                {name:"湖南",regionHeight: 100, itemStyle: { color: '#003366' }}, 
                {name:"安徽",regionHeight: 100, itemStyle: { color: '#003366' }}, 
                {name:"江西",regionHeight: 100, itemStyle: { color: '#003366' }}, 
                //华北区域南方区域
                {name:"内蒙古",regionHeight: 100, itemStyle: { color: '#0d3358' }},
                {name:"宁夏",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"陕西",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"四川",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"云南",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"贵州",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"广西",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"甘肃",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"青海",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"新疆",regionHeight: 100, itemStyle: { color: '#0d3358' }}, 
                {name:"西藏",regionHeight: 100, itemStyle: { color: '#0d3358' }},
                {name:"重庆",regionHeight: 100, itemStyle: { color: '#0d3358' }},
            ]
          }
        ]
        
      };
      mychart.setOption(options);
    }
  }
};