repository·master·Indexed 25 days ago
https://github.com/ecomfe/echarts-glAn extension pack for Apache ECharts providing 3D plots, globe visualization, and WebGL acceleration for high-performance data visualization. It supports various 3D chart types including scatter3D, bar3D, line3D, lines3D, surface, and graphGL with ForceAtlas2 and ForceAtlas2GPU layout algorithms.
For simple HTML environments without a build step, include ECharts and ECharts-GL using <script> tags from a CDN.
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>Depending on your needs, you can import the entire library or use a minimal import to reduce bundle size.
Full Import: Imports all features from both libraries.
Minimal Import:
Uses echarts/core and specifically imports only the required components like Scatter3DChart and Grid3DComponent to optimize the bundle.
// Import all
import * as echarts from 'echarts';
import 'echarts-gl';
// Minimal Import
import * as echarts from 'echarts/core';
import { Scatter3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';
echarts.use([Scatter3DChart, Grid3DComponent]);To use ECharts-GL in a modern JavaScript project with a bundler like webpack, install both echarts and echarts-gl using npm.
npm install echarts
npm install echarts-glinstall function is called with the ECharts registration object. The Surface chart type requires a cartesian3D coordinate system to function correctly. If a different coordinate system is used, an error will be logged in non-production environments.line3D series type in ECharts GL, you must ensure the line3D component is installed/registered. The line3D series requires a cartesian3D coordinate system to function correctly. If a different coordinate system is used, an error will be logged in non-production environments.To use the scatter3D series type in ECharts GL, you must ensure the scatter3D components are registered. This is typically handled by importing the echarts-gl package. The scatter3D series requires a 3D coordinate system (having at least 3 dimensions) to function correctly. If used with a 2D coordinate system, an error will be logged in non-production environments.
import '../../echarts-gl';Use echarts.init() to initialize the chart and setOption() to configure the 3D components (grid3D, xAxis3D, yAxis3D, zAxis3D) and the series type (scatter3D).
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
series: [{
type: 'scatter3D',
symbolSize: 50,
data: [[-1, -1, -1], [0, 0, 0], [1, 1, 1]],
itemStyle: {
opacity: 1
}
}]
})Ensure your versions are compatible:
To use the lines3D chart type in ECharts GL, you must call the install function and pass the ECharts registration object. This registers the necessary view, series model, layout, and actions for 3D lines.
Note: Ensure that echarts-gl is imported in your project to initialize the GL environment.
bar3D chart type in ECharts GL, you must call the install function and pass the ECharts registration object (registers). This registers the necessary view, series model, and layout components, and sets up a processor to filter series data for bar3d types.To use graphGL series and the ForceAtlas2 / ForceAtlas2GPU layout algorithms in ECharts, you must call the install function provided by the graphGL module. This registers the necessary series models, view components, and layout algorithms into the ECharts instance.
When using graphGL, the following features are registered:
graphGLForceAtlas2 and ForceAtlas2GPU (mounted to the ECharts namespace)graphGLRoam, graphGLStartLayout, graphGLStopLayout, graphGLFocusNodeAdjacency, and graphGLUnfocusNodeAdjacency.graphglroam, graphgllayoutstarted, graphgllayoutstopped, graphGLFocusNodeAdjacency, and graphGLUnfocusNodeAdjacency.The lines3D chart type supports specific actions to control visual effects. These actions can be triggered via the ECharts dispatch action API:
lines3DPauseEffect: Pauses the line effect. Triggers the lines3deffectpaused event.lines3DResumeEffect: Resumes the line effect. Triggers the lines3deffectresumed event.lines3DToggleEffect: Toggles the line effect. Triggers the lines3deffectchanged event.