@macroui/echarts-gl
v2.1.0
Published
Extension pack of Apache ECharts™ providing 3D plots, globe visualization and WebGL acceleration, themed with MacroUI (DaisyUI).
Readme
@macroui/echarts-gl
@macroui/echarts-gl 是 echarts-gl 的重命名分支,内置 MacroUI(DaisyUI 中文版) 主题系统。
安装
npm
npm install echarts @macroui/echarts-gl全量引入
import * as echarts from 'echarts';
import '@macroui/echarts-gl';按需引入
import * as echarts from 'echarts/core';
import { Scatter3DChart } from '@macroui/echarts-gl/charts';
import { Grid3DComponent } from '@macroui/echarts-gl/components';
echarts.use([Scatter3DChart, Grid3DComponent]);CDN
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@macroui/echarts-gl/dist/echarts-gl.min.js"></script>[!NOTE] ECharts GL 2.x 兼容 ECharts 5.x。 ECharts GL 1.x 兼容 ECharts 4.x。
基础用法
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
}
}]
})功能特性
- 3D 图表:散点 3D、线 3D、柱状 3D、曲面、地图 3D、地球等
- WebGL 加速:大数据集流畅渲染
- 地球可视化:带大气效果的可交互 3D 地球
- GIS 集成:支持 MapboxGL 和 Maptalks
文档
MacroUI(DaisyUI)主题
演示使用 MacroUI(DaisyUI 中文版)作为主题。在项目中使用:
// tailwind.config.js
import macroui from "@macroui/macroui";
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts}"],
plugins: [macroui],
macroui: {
themes: ["light", "dark", "cupcake", "corporate", /* ... */],
},
};/* 全局样式文件 */
@tailwind base;
@tailwind components;
@tailwind utilities;在运行时切换主题,只需在 <html> 上设置 data-theme:
<html data-theme="dark"></html>本地开发
npm install
npm run build许可
@macroui/echarts-gl 采用 MIT 许可证。
声明
The Apache Software Foundation Apache ECharts, ECharts、Apache、Apache 羽毛图标及 Apache ECharts 项目徽标均为 Apache Software Foundation 的注册商标或商标。
