Echarts 3D散点图实战案例

更新时间：2023年11月06日 16:26:01 作者：博客zhu虎康

这篇文章主要给大家介绍了关于Echarts 3D散点图的相关资料, Echarts散点图是一种常用的数据可视化图表类型,用于展示两个或多个维度的数据分布情况,需要的朋友可以参考下

1、以下是一个 html + echarts的案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 3D Scatter Plot Demo</title>
    <!-- 引入 ECharts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
    <!-- 绘制 3D 散点图的容器 -->
    <div id="scatter-chart" style="width: 720px; height: 480px;"></div>
    <script>
        // 3D 散点图的数据格式，包含三个维度坐标信息和额外的数据
        var data = [
            [10, 20, 30, 'data1'],
            [20, 40, 10, 'data2'],
            [30, 60, 20, 'data3'],
            [40, 80, 40, 'data4'],
            [50, 100, 30, 'data5'],
            [60, 120, 50, 'data6']
        ];
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('scatter-chart'));
        // 绘制3D散点图
        myChart.setOption({
            // 图表标题
            title: {
                text: 'ECharts 3D Scatter Plot Demo'
            },
            // 图表类型，3D散点图
            series: [{
                type: 'scatter3D',
                // 数据
                data: data,
                // 点大小
                symbolSize: 20,
                // 控制点的透明度
                itemStyle: {
                    opacity: 0.8
                }
            }],
            // X轴的3D坐标系，相关设置
            xAxis3D: {
                type: 'value',
                scale: true
            },
            // Y轴的3D坐标系，相关设置
            yAxis3D: {
                type: 'value',
                scale: true
            },
            // Z轴的3D坐标系，相关设置
            zAxis3D: {
                type: 'value',
                scale: true
            },
            // 旋转3D图表
            grid3D: {
                viewControl: {
                    // 摄像机视角
                    alpha: 45,
                    beta: 30
                }
            }
        });
    </script>
</body>
</html>

2、以下是一个 vue+echarts 的案例

index.vue

<!--
 * @Description: file content
 * @Version: 2.0
 * @Autor: Hu Kang
 * @Date: 2023-04-04 18:49:29
 * @LastEditors: Hu Kang
 * @LastEditTime: 2023-05-10 15:24:28
 * @FilePath: \src\views\page\echarts\index.vue
-->
<template>
  <div class="content">
  <template #title> <icon-home /> 散点图</template>
            <div>
              <input type="file" id="inputfile" />
              <button @click="readFile()">读取文件</button>
            </div>
            <splashes v-if="activeKey === '7'" :chart-data="chartData" />
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  watch,
  watchEffect,
  computed,
  getCurrentInstance,
  nextTick,
  defineComponent,
  toRefs,
} from 'vue';
import splashes from './components/splashes.vue';
const chartData = ref()
function readFile() {
  var file = document.getElementById('inputfile').files[0]; // 获取选择的文件
  if (!file) return;
  var reader = new FileReader();
  reader.readAsText(file, 'UTF-8'); // 以文本格式读取文件
  reader.onload = function (event) {
    // 取到的文件内容
    chartData.value = JSON.parse(event.target.result);
  }
}
</script>
<style scoped lang="less">
.box-card-component {
  padding: 0px 20px;
  .card-header {
    color: #409eff;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    // height: 20px;
  }
}
</style>

splashes.vue

<!--
 * @Description: file content
 * @Version: 2.0
 * @Autor: Hu Kang
 * @Date: 2023-05-09 16:34:49
 * @LastEditors: Hu Kang
 * @LastEditTime: 2023-05-10 15:08:35
 * @FilePath: \src\views\page\echarts\components\splashes.vue
-->

<template>
  <div ref="echartsRef" class="content" id="my-div"> </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  watch,
  watchEffect,
  computed,
  getCurrentInstance,
  nextTick,
  defineComponent,
  toRefs,
  onMounted,
} from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl'
import { RequestType } from 'cesium';

const props = defineProps({
  // 数据 chart-data
  chartData: {
    type: Object,
    require: true,
    default: () => {
      return {}
    }
  },
  width: {
    type: String,
    default: '98%'
  },
  height: {
    type: String,
    default: '67vh'
  },
  autoResize: {
    type: Boolean,
    default: true
  }
})
const { chartData } = toRefs(props)

// 3D 散点图的数据格式，包含三个维度坐标信息和额外的数据
var data = [
  [10, 20, 30, 'data1'],
  [20, 40, 10, 'data2'],
  [30, 60, 20, 'data3'],
  [40, 80, 40, 'data4'],
  [50, 100, 30, 'data5'],
  [60, 120, 50, 'data6']
];

var sizeValue = '57%';
var symbolSize = 2.5;
const echartsData = reactive({
  option: {
    // 图表标题
    title: {
      text: 'ECharts 3D Scatter Plot Demo',
      subtext: '3D散点图绘制情况',
      left: 'center'
    },
    // 图表类型，3D散点图
    series: [{
      type: 'scatter3D',
      // 数据
      data: data,
      // 点大小
      symbolSize: 10,
      // 控制点的透明度
      itemStyle: {
        opacity: 0.8
      }
    },
    {
      type: 'scatter',
      symbolSize: symbolSize,
      xAxisIndex: 0,
      yAxisIndex: 0,
      encode: {
        x: 'Income',
        y: 'Life Expectancy',
        tooltip: [0, 1, 2, 3, 4]
      }
    },
    {
      type: 'scatter',
      symbolSize: symbolSize,
      xAxisIndex: 1,
      yAxisIndex: 1,
      encode: {
        x: 'Country',
        y: 'Income',
        tooltip: [0, 1, 2, 3, 4]
      }
    },
    {
      type: 'scatter',
      symbolSize: symbolSize,
      xAxisIndex: 2,
      yAxisIndex: 2,
      encode: {
        x: 'Income',
        y: 'Population',
        tooltip: [0, 1, 2, 3, 4]
      }
    },
    {
      type: 'scatter',
      symbolSize: symbolSize,
      xAxisIndex: 3,
      yAxisIndex: 3,
      encode: {
        x: 'Life Expectancy',
        y: 'Population',
        tooltip: [0, 1, 2, 3, 4]
      }
    }],
    // X轴的3D坐标系，相关设置
    xAxis3D: {
      type: 'value',
      scale: true
    },
    // Y轴的3D坐标系，相关设置
    yAxis3D: {
      type: 'value',
      scale: true
    },
    // Z轴的3D坐标系，相关设置
    zAxis3D: {
      type: 'value',
      scale: true
    },
    // 旋转3D图表
    grid3D: {
      viewControl: {
        // 摄像机视角
        alpha: 45,
        beta: 30
      }
    },
    grid: [
      { left: '2%', width: '20%', bottom: sizeValue },
      { left: '80%', width: '20%', bottom: sizeValue },
      { left: '2%', width: '20%', top: sizeValue },
      { left: '80%', width: '20%', top: sizeValue }
    ],
    xAxis: [
      {
        type: 'value',
        gridIndex: 0,
        name: 'Income',
        axisLabel: { rotate: 50, interval: 0 }
      },
      {
        type: 'category',
        gridIndex: 1,
        name: 'Country',
        boundaryGap: false,
        axisLabel: { rotate: 50, interval: 0 }
      },
      {
        type: 'value',
        gridIndex: 2,
        name: 'Income',
        axisLabel: { rotate: 50, interval: 0 }
      },
      {
        type: 'value',
        gridIndex: 3,
        name: 'Life Expectancy',
        axisLabel: { rotate: 50, interval: 0 }
      }
    ],
    yAxis: [
      { type: 'value', gridIndex: 0, name: 'Life Expectancy' },
      { type: 'value', gridIndex: 1, name: 'Income' },
      { type: 'value', gridIndex: 2, name: 'Population' },
      { type: 'value', gridIndex: 3, name: 'Population' }
    ],
    dataset: {
      dimensions: [
        'Income',
        'Life Expectancy',
        'Population',
        'Country',
        { name: 'Year', type: 'ordinal' }
      ],
      source: []
    },

  }
})
const { option } = toRefs(echartsData);
const echartsRef = ref<string>();
let echartInstance;


watch(
  chartData,
  (newValue) => {
    if (newValue && newValue.data?.length) {
      option.value.dataset.source = newValue.data
    }

  },
  { deep: true, immediate: true }
)

watch(
  option,
  (newValue) => {
    echartInstance.setOption(newValue);
  },
  { deep: true }
)

onMounted(() => {
  echartInstance = echarts.init(echartsRef.value, 'macarons', { renderer: 'webgl' });
  echartInstance.setOption(option.value);
});
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 90vh;
}
</style>

使用前需要先安装一下依赖

npm install echarts-gl --save或 yarn add echarts-gl

安装完成后，在代码中引入 echarts-gl 包：

import echarts from 'echarts';
import 'echarts-gl';

接下来，你就可以在代码中使用 scatter3D 组件了，具体的使用方法可以参考官方文档。

控制台如果有提示： geo3D exists，是因为你的版本太低了，可以升级一下

升级

npm update echarts-gl 或 yarn upgrade echarts-gl

如果你是通过 CDN 引入 echarts 和 echarts-gl，可以尝试使用最新的链接，如：

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@latest/dist/echarts-gl.min.js"></script>

如果以上方法无效，你还可以尝试手动清空浏览器缓存并重新加载页面，或者删除旧版本 echarts-gl，重新安装最新版本。

总结

到此这篇关于Echarts 3D散点图的文章就介绍到这了,更多相关Echarts 3D散点图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript中的绑定与解绑函数应用示例
本文为大家详细介绍下javascript中绑定与解绑函数在Ie及Mozilla中的应用，感兴趣的各位可以参考下哈，希望对大家有所帮助
2013-06-06
html+css+js实现简易版ChatGPT聊天机器人
OpenAI的一款聊天机器人模型ChatGPT爆火，本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。
2023-02-02
js判断请求的url是否可访问,支持跨域判断的实现方法
下面小编就为大家带来一篇js判断请求的url是否可访问,支持跨域判断的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
可能被忽略的一些JavaScript数组方法细节
这篇文章主要给大家介绍了一些可能被忽略的JavaScript数组方法细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
js鼠标按键事件和键盘按键事件用法实例汇总
这篇文章主要介绍了js鼠标按键事件和键盘按键事件用法,结合实例形式总结分析了JavaScript针对鼠标与键盘事件的常用操作技巧,需要的朋友可以参考下
2016-10-10
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
本文以kitjs对话框组件为例，给我们详细介绍了kitjs的组件目录、默认代码模板、构造器及初始方法、以及Kitjs继承。讲解的非常细致，对我们熟练掌握kitjs组件很有帮助。
2014-11-11
JS实现的A*寻路算法详解
这篇文章主要介绍了JS实现的A*寻路算法,结合实例形式详细分析了A*寻路算法的概念、原理、实现技巧与相关注意事项,需要的朋友可以参考下
2018-12-12
js获取滚动距离的方法
这篇文章主要介绍了js获取滚动距离的方法,涉及javascript针对页面滚动条的相关操作技巧,需要的朋友可以参考下
2015-05-05
【经验总结】编写JavaScript代码时应遵循的14条规律
这篇文章主要介绍了编写JavaScript代码时应遵循的14条规律,涉及javascript变量的定义,函数、表单、json的使用,逻辑运算与页面元素操作技巧等,非常具有实用价值,需要的朋友可以参考下
2016-06-06
JavaScript实现移动端禁止下拉露出网址广告屏蔽技巧
这篇文章主要为大家介绍了JavaScript实现移动端禁止下拉露出网址或的广告屏蔽技巧示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06