三维可视化echarts散点图

<template>
  <div style="height: 100%; width: 100%">
    <div id="maxbox" :class="className" :style="{ height: height, width: width }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { FormatMoney, FormatNum } from "@/utils/filter";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {plotData} from "./scatterplotMock";
import "echarts-gl";
export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
    };
  },
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    medicalSizeAvg: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initThreeDCharts();
    });
  },
  methods: {
    initThreeDCharts() {
      // data格式 [22,25,26，名称”]
      // let symbollist = this.list
      if(symbollist.length == 1) { // 这里有个bug，只有一条的时候tooltip不显示，所以要加个隐藏的数据，然后3个维度设min:0
        symbollist.push([-999999999,-999999999,-999999999,''])
      }
      let option = {
        tooltip: {
          trigger: 'item',
          className: 'echarts-tooltip',
          // alwaysShowContent:false,
          formatter: function(params) {
            let data = params.data;
            let formatted = `<div class="tooltipItem">费用: ${data[0]}元</div>
              <div class="tooltipItem">平均日: ${data[1]}天</div>
              <div class="tooltipItem">数量: ${data[2]}</div>`;
            if (data.length > 3) {
              formatted = `<div class="tooltipTitle">${data[3]}</div>`+formatted;
            }
            return formatted;
          }
        },
        xAxis3D: {
          name: "次均费用", //x轴显示为x
          type: "value",
          nameTextStyle: {
            color: '#333333',
            fontSize:'14',
            height: 27,
            width: 97,
            background: '#F1F8FF'
          },
          min: 0,
          axisTick: {
            show: false, //显示每个值对应的刻度
          },
          axisLine: {
            //x轴坐标轴，false为隐藏，true为显示
            show: true,
            lineStyle:{
              type:"dashed"
            }
          },
          axisLabel: {
            show: true, //是否显示刻度 (刻度上的数字，或者类目)， false为隐藏，true为显示
            fontSize:12,
            color:"#999999",
            rotate:40
          },
        },
        yAxis3D: {
          name: "平均住院日", //y轴显示为y
          type: "value",
          splitNumber: 5,
          axisLabel:{
            rotate:40
          },
          min: 0,
          nameTextStyle: {
            color: '#333333',
            fontSize:'14',
            height: 27,
            width: 97,
            background: '#F1F8FF'
          },
          axisTick: {
            show: false, //显示每个值对应的刻度
          },
          // min: 0,
          // max: 360,
          // interval: 90,
        },
        zAxis3D: {
          name: "病\n例\n数", //z轴显示为z
          type: "value",
          nameTextStyle: {
            color: '#333333',
            fontSize:'14',
            height: 27,
            width: 97,
            background: '#F1F8FF'
          },
          min: 0,
          axisTick: {
            show: false, //显示每个值对应的刻度
          },
        },
        dataZoom: [
            {
                type: 'inside',
                zoomLock: true,
            }
        ],
        grid3D: {
          left:"center",
          top:"center",
          containLabel: true,
          axisLine: {
            lineStyle: {
              //坐标轴样式
              color: "#7DB7F9", //轴线颜色
              opacity: 1, //(单个刻度不会受影响)
              width: 1, //线条宽度
            },
          },
          axisLabel:{
            textStyle:{
              fontSize: 12,
              color: "#999999",
            }
          },
          splitLine:{
            lineStyle:{
              type:'dashed',
              color:'#7DB7F9',
            }
          },
          axisPointer: {
            lineStyle: { 
              color: "#C5E0FF", //坐标轴指示线
            },
            show: true, //展示坐标轴指示线
          },
          viewControl: {
            projection: 'orthographic',
            distance: 200, //与视角的距离，值越大，图离视角越远，图越小
            alpha: 20, //绕x轴旋转的角度（上下旋转），增大，视角顺时针增大（向上）
            beta: 40, //绕y轴旋转的角度（左右旋转），增大，视角逆时针增大（向右）
            center: [0,10,0], //第一个参数：增大，视角沿x轴正方向水平右移动（图向左）；第二个参数：增大，视角沿y轴正方向垂直向上移动（图向下）；第三个参数：增大，视角向z轴正方向移动（图变小）
          },
          boxWidth: 80,
          boxHeight: 80,
          boxDepth: 80,
          top: -50,
        },
 
        series: [
          {
            type: "scatter3D",
            dimensions: [
              "x",
              "y",
              "z",
              "病种",
            ], //悬浮到点时弹出的显示框信息
            data: [
              [0, 0, 0, '妊娠合并子宫瘢痕'],
              [1, 0, 0, '多发性脑梗死'],
              [0, 1, 0, '脑梗'],
              [0, 1, 1, '细菌性肺炎'],
              [21, 24, 25, '腰椎间盘突出'],
              [22, 25, 26, '细菌性肺炎'],
              [50, 40, 70, '脑动脉供血不足']
              [10, 10, 15, '妊娠合并子宫瘢痕'],
              [21, 10, 10, '多发性脑梗死'],
              [100, 12, 20, '脑梗'],
              [30, 11, 13, '细菌性肺炎'],
              [24, 24, 25, '腰椎间盘突出'],
              [32, 25, 26, '细菌性肺炎'],
              [60, 40, 70, '脑动脉供血不足']
            ],
            symbolSize: 12, //点的大小
            itemStyle: {
              color: "#00A3FF", 
            },
          },
        ],
        backgroundColor: "#fff",
      };
      this.chart = echarts.init(this.$el, "maxbox");
      this.chart.setOption(option);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#maxbox {
  margin: 0 auto;
}
::v-deep .tooltipTitle{
  width: 188px;
  height: 32px;
  background: #EBF4FF;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  padding-left: 16px;
  box-sizing: border-box;
  line-height: 32px;
}
::v-deep .echarts-tooltip{
  padding:0!important;
  width: 188px;
  height: 114px;
  background: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(83,152,247,0.2);
  border-radius: 4px 4px 4px 4px;
  border:none!important;
  display: none;
}
::v-deep .tooltipItem{
  padding:0 16px 0 28px;
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 12px;
  color: #666666;
  line-height: 24px;
  position: relative;
}
::v-deep .tooltipItem:before{
  width: 6px;
  height: 6px;
  background: #E0E0E0;
  content:"";
  position: absolute ;
  top:50%;
  transform: translateY(-50%);
  left: 16px;
  border-radius: 50%;
}
</style>