Echarts 3D散点图实战案例
作者：博客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散点图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！