Echarts 3D散点图_echarts3d散点图

作者：繁依Fanyi0 | 2024-03-28 20:08:58

踩

echarts3d散点图

文章目录

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

以下是一个 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243

使用前需要先安装一下依赖
npm install echarts-gl --save或 yarn add echarts-gl

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

import echarts from 'echarts';
import 'echarts-gl';
1
2

接下来，你就可以在代码中使用 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>
1
2

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/331065