Echarts?3D散點(diǎn)圖實(shí)戰(zhàn)案例

更新時(shí)間：2023年11月06日 16:26:01 作者：博客zhu虎康

這篇文章主要給大家介紹了關(guān)于Echarts?3D散點(diǎn)圖的相關(guān)資料, Echarts散點(diǎn)圖是一種常用的數(shù)據(jù)可視化圖表類型,用于展示兩個(gè)或多個(gè)維度的數(shù)據(jù)分布情況,需要的朋友可以參考下

1、以下是一個(gè) 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 散點(diǎn)圖的容器 -->
    <div id="scatter-chart" style="width: 720px; height: 480px;"></div>
    <script>
        // 3D 散點(diǎn)圖的數(shù)據(jù)格式，包含三個(gè)維度坐標(biāo)信息和額外的數(shù)據(jù)
        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']
        ];
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('scatter-chart'));
        // 繪制3D散點(diǎn)圖
        myChart.setOption({
            // 圖表標(biāo)題
            title: {
                text: 'ECharts 3D Scatter Plot Demo'
            },
            // 圖表類型，3D散點(diǎn)圖
            series: [{
                type: 'scatter3D',
                // 數(shù)據(jù)
                data: data,
                // 點(diǎn)大小
                symbolSize: 20,
                // 控制點(diǎn)的透明度
                itemStyle: {
                    opacity: 0.8
                }
            }],
            // X軸的3D坐標(biāo)系，相關(guān)設(shè)置
            xAxis3D: {
                type: 'value',
                scale: true
            },
            // Y軸的3D坐標(biāo)系，相關(guān)設(shè)置
            yAxis3D: {
                type: 'value',
                scale: true
            },
            // Z軸的3D坐標(biāo)系，相關(guān)設(shè)置
            zAxis3D: {
                type: 'value',
                scale: true
            },
            // 旋轉(zhuǎn)3D圖表
            grid3D: {
                viewControl: {
                    // 攝像機(jī)視角
                    alpha: 45,
                    beta: 30
                }
            }
        });
    </script>
</body>
</html>

2、以下是一個(gè) 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 /> 散點(diǎn)圖</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) {
    // 取到的文件內(nèi)容
    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({
  // 數(shù)據(jù) 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 散點(diǎn)圖的數(shù)據(jù)格式，包含三個(gè)維度坐標(biāo)信息和額外的數(shù)據(jù)
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: {
    // 圖表標(biāo)題
    title: {
      text: 'ECharts 3D Scatter Plot Demo',
      subtext: '3D散點(diǎn)圖繪制情況',
      left: 'center'
    },
    // 圖表類型，3D散點(diǎn)圖
    series: [{
      type: 'scatter3D',
      // 數(shù)據(jù)
      data: data,
      // 點(diǎn)大小
      symbolSize: 10,
      // 控制點(diǎn)的透明度
      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坐標(biāo)系，相關(guān)設(shè)置
    xAxis3D: {
      type: 'value',
      scale: true
    },
    // Y軸的3D坐標(biāo)系，相關(guān)設(shè)置
    yAxis3D: {
      type: 'value',
      scale: true
    },
    // Z軸的3D坐標(biāo)系，相關(guān)設(shè)置
    zAxis3D: {
      type: 'value',
      scale: true
    },
    // 旋轉(zhuǎn)3D圖表
    grid3D: {
      viewControl: {
        // 攝像機(jī)視角
        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，是因?yàn)槟愕陌姹咎土?，可以升級一?/p>

升級

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>

如果以上方法無效，你還可以嘗試手動(dòng)清空瀏覽器緩存并重新加載頁面，或者刪除舊版本 echarts-gl，重新安裝最新版本。

總結(jié)

到此這篇關(guān)于Echarts 3D散點(diǎn)圖的文章就介紹到這了,更多相關(guān)Echarts 3D散點(diǎn)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: