Echarts 3D散点图

文章目录

以下是一个 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>

以下是一个 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-datachartData: {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 散点图颜色条件查询
原文链接: echarts 3d 散点图颜色条件查询上一篇: layui 简单表格下一篇: echarts rgb hsv 颜色空间 $.get('data/asset/data/life-ex ...
echarts 3D立体图（江苏版）
npm install echarts@4.9.0 echarts-gl@1.0.1 --legacy-peer-deps 安装echarts插件和echarts 3D地图插件配置main.js i ...
R语言使用scatterplot3d包的scatterplot3d函数可视化3D散点图（3D scatter plots）、在3D散点图中添加垂直线和数据点描影、3D图中添加回归平面
R语言使用scatterplot3d包的scatterplot3d函数可视化3D散点图(3D scatter plots).在3D散点图中添加垂直线和数据点描影.3D图中添加回归平面(overlaid ...
R语言使用car包的scatter3d函数可视化可以交互旋转的3D散点图(Spinning 3D scatter plot by the scatter3d() function of car)
R语言使用car包的scatter3d函数可视化可以交互旋转的3D散点图(Spinning 3D scatter plot produced by the scatter3d() function i ...
R语言可视化：散点图、散点图和折线图（line charts）、3D散点图、旋转3D散点图、气泡图、corrgram包可视化相关性矩阵、马赛克图（ Mosaic plots）、hexbin、密度图
R语言可视化:散点图.散点图和折线图(line charts).3D散点图.旋转3D散点图.气泡图.corrgram包可视化相关性矩阵.马赛克图( Mosaic plots).hexbin.密度图目 ...
R语言使用plotly绘制3D散点图实战
R语言使用plotly绘制3D散点图实战目录 R语言使用plotly绘制3D散点图实战 #仿真数据 #plotly绘制3D散点图 #仿真数据 set.seed(41
matlab传递闭包动态聚类图,用SPSS制作3D散点图全方位动态展示K均值聚类效果
SPSS系统聚类输出的树状图广受用户喜爱,二阶聚类也可以输出一系列美观的可视化图形用来观察聚类效果,但我们发现Kmeans均值聚类没有提供可视化程度高的图形,那怎么办,我们自己来制作. 数据小兵推荐使 ...
python如何做散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
python画三维温度散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...

Echarts 3D散点图

文章目录

Echarts 3D散点图相关推荐

最新文章

热门文章