Echarts3D散点图

最新推荐文章于 2025-05-12 15:00:33 发布

原创最新推荐文章于 2025-05-12 15:00:33 发布 · 2.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文介绍了如何使用Echarts-GL库创建3D散点图，包括设置图表尺寸、颜色、轴标签等。通过示例代码展示了如何初始化Echarts实例，以及配置x、y、z轴参数，使数据在3D空间中呈现。同时，提到了sandian3dData数据结构，用于存储图表的维度名称和数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts3D散点图

在这里插入图片描述
下载

npm install echarts-gl

<template>
  <div :id="id"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
  name: "sandian3d",
  props: {
    id: String,
    colorArr: Object,
    sandian3dData:Object
  },
  data() {
    return {
      echartData: {
        categories: ["时刻调整数量", "换乘等待缩短时间", "时刻调整总时间"],
        series: [{ name: "方案一", data: [5, 740, 251], color: "" }],
      },
    };
  },
  mounted() {
    this.initEchart(this.echartData, this.id);
  },
  methods: {
    initEchart(data, id) {
      for (let i = 0; i < data.series.length; i++) {
        const e = data.series[i];
        e.dimensions = data.categories;
        e.symbolSize = 10; //点的大小
        e.type = "scatter3D";
        e.data = [data.categories, e.data];
      }
      // console.log(data.series)
      document.getElementById(id).removeAttribute("_echarts_instance_");
      var myChart = echarts.init(document.getElementById(id));
      // console.log(myChart);
      myChart.setOption({
        tooltip: {},
        xAxis3D: {
          name: this.sandian3dData.xName,
          type: "value",
          //                min: 'dataMin',//获取数据中的最值
          //                max: 'dataMax'
          axisLine: {
            lineStyle: {
              color: this.colorArr.labelColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.colorArr.labelColor,
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: this.colorArr.lineColor,
            },
          },
        },
        yAxis3D: {
          name: this.sandian3dData.yName,
          type: "value",
          //                min: 'dataMin',
          //                max: 'dataMax'
          axisLine: {
            lineStyle: {
              color: this.colorArr.labelColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.colorArr.labelColor,
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: this.colorArr.lineColor,
            },
          },
        },
        zAxis3D: {
          name: this.sandian3dData.zName,
          type: "value",
          //                min: 'dataMin',
          //                max: 'dataMax'
          axisLine: {
            lineStyle: {
              color: this.colorArr.labelColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.colorArr.labelColor,
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: this.colorArr.lineColor,
            },
          },
        },
        grid3D: {
          axisLine: {
            lineStyle: {
              color: this.colorArr.lineColor, //轴线颜色
            },
          },
          axisPointer: {
            lineStyle: {
              color: "#6385c9", //坐标轴指示线
            },
            show: true, //不坐标轴指示线
          },
          viewControl: {
            // autoRotate: true, //旋转展示
            // projection: 'orthographic',
            beta:5,
            alpha:5
          },

          boxWidth: 200,
          boxHeight: 100,
          boxDepth: 100,
        },
        series: data.series,
        // series: [
        //   {
        //     name: "123",
        //     type: "scatter3D",
        //     dimensions: data.categories,
        //     // encode: {
        //     // x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。
        //     // y: 2, // 表示维度 2 映射到 y 轴。
        //     // tooltip: ["a", "c", "b"], // 表示维度 3、2、4 会在 tooltip 中显示。
        //     // label: "a", // 表示 label 使用维度 3。
        //     // },
        //     data: [
        //       ["a", "b", "c"],
        //       [3, 1, 5],
        //     ],
        //     symbolSize: 10, //点的大小
        //     // symbol: 'triangle',
        //     itemStyle: {
        //       borderWidth: 1,
        //       borderColor: "rgba(255,255,255,0.8)", //边框样式
        //     },
        //     emphasis: {
        //       itemStyle: {
        //         color: "#ccc", //高亮
        //       },
        //     },

        //     zlevel: -10,
        //   },
        // ],
        backgroundColor: "#021338",
      });
    },
  },
};
</script>

sandian3dData数据

sandian3dData:{
        xName:'出行总时间',
        yName:'去除中转时间后的出行时间',
        zName:'总费用',
        data:[]
      }