import Vue from "vue";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
import "echarts-gl";

          <div class="threeDCharts"></div>
initThreeDCharts() {
      /* https://echarts.apache.org/examples/zh/editor.html?c=scatter3D-dataset&gl=1 */
      let option = {
        tooltip: {},
        xAxis3D: {
          name: "x", //x軸顯示為x
          type: "value",
          // min: 'dataMin',//獲取數(shù)據(jù)中的最值
          // max: 'dataMax'
          min: 0,
          max: 80,
          interval: 20, //坐標軸刻度標簽的顯示間隔，在類目軸中有效
          axisTick: {
            show: false, //顯示每個值對應的刻度
          },
          axisLine: {
            //x軸坐標軸，false為隱藏，true為顯示
            show: true,
          },
          axisLabel: {
            show: false, 是否顯示刻度 (刻度上的數(shù)字，或者類目)， false為隱藏，true為顯示
          },
          itemStyle: {
            borderColor: "#fff",
            backgroundColor: "#fff",
          },
        },
        yAxis3D: {
          name: "y", //y軸顯示為y
          type: "value",
          splitNumber: 5,
          axisTick: {
            show: false, //顯示每個值對應的刻度
          },
          min: 0,
          max: 360,
          interval: 90,
        },
        zAxis3D: {
          name: "z", //z軸顯示為z
          type: "value",
          min: -20,
          max: 60,
          interval: 20,
          axisTick: {
            show: false, //顯示每個值對應的刻度
          },
        },
        grid3D: {
          axisLine: {
            lineStyle: {
              //坐標軸樣式
              color: "#070707", //軸線顏色
              opacity: 0.8, //(單個刻度不會受影響)
              width: 1, //線條寬度
            },
          },
          axisPointer: {
            lineStyle: {
              color: "#f00", //坐標軸指示線
            },
            show: false, //不坐標軸指示線
          },
          viewControl: {
            // autoRotate: true,//旋轉(zhuǎn)展示
            // projection: 'orthographic'
            // beta:0,
            distance: 230, //與視角的距離，值越大，圖離視角越遠，圖越小
            alpha: 7, //繞x軸旋轉(zhuǎn)的角度（上下旋轉(zhuǎn)），增大，視角順時針增大（向上）
            beta: 20, //繞y軸旋轉(zhuǎn)的角度（左右旋轉(zhuǎn)），增大，視角逆時針增大（向右）
            center: [-15, -5, -20], //第一個參數(shù)：增大，視角沿x軸正方向水平右移動（圖向左）；第二個參數(shù)：增大，視角沿y軸正方向垂直向上移動（圖向下）；第三個參數(shù)：增大，視角向z軸正方向移動（圖變小）
          },
          boxWidth: 120,
          boxHeight: 70,
          boxDepth: 120,
          top: -100,
        },
        series: [
          {
            type: "scatter3D",
            dimensions: [
              "x",
              "y",
              "z", //懸浮到點時彈出的顯示框信息
            ],
            // encode: {
            // x: [3, 1, 5],      // 表示維度 3、1、5 映射到 x 軸。
            // y: 1,              // 表示維度 2 映射到 y 軸。
            // z: 3,
            // tooltip:['a','c','b'], // 表示維度 3、2、4 會在 tooltip 中顯示。
            // label: 'a'           // 表示 label 使用維度 3。
            // },
            data: [
              [0, 0, 0],
              [1, 0, 0],
              [0, 1, 0],
              [0, 1, 1],
              [21, 24, 25],
              [22, 25, 26],
            ],
            symbolSize: 4, //點的大小
            // symbol: 'triangle',
            itemStyle: {
              // borderWidth: 1,
              color: "#87f0e5",
              // borderColor: 'rgba(255,255,255,0.8)'//邊框樣式
            },
            emphasis: {
              itemStyle: {
                color: "#ccc", //高亮
              },
            },
            // itemStyle: {
            //     color: "#87f0e5"
            // }
          },
        ],
        backgroundColor: "#e8e8e8",
      };
      this.myChart = this.$echarts.init(
        document.querySelector(".threeDCharts")
      );
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
   .threeDCharts {
      width: 100%;
      height: 600px;
      border: 2px solid peru;
    }