echarts-gl 初体验

根据官方文档，首先需要下载echarts.js，echarts-gl.js并引入

在官网下载了文件一顿操作后各种报错，都是js文件的问题，这里放两个下载链接，需要自取

echarts.min.js
echarts-gl.min.js

跟着文档实现了简单的三维笛卡尔坐标系，效果如下

代码：
html

<div id="main" style="width: 600px;height:400px;"></div>

script

<script type="text/javascript" src="js/echarts.min.js"></script><script type="text/javascript" src="js/echarts-gl.min.js"></script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {grid3D: {},xAxis3D: {},yAxis3D: {},zAxis3D: {}}myChart.setOption(option);</script>

在坐标系中加入一些数据后效果如下：

更改script部分代码

var myChart = echarts.init(document.getElementById('main'));function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {var exponent = -((Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))+ (Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2))));return amplitude * Math.pow(Math.E, exponent);}.bind(null, amplitude, x0, y0, sigmaX, sigmaY);}// 创建一个高斯分布函数var gaussian = makeGaussian(50, 0, 0, 20, 20);var data = [];for (var i = 0; i < 300; i++) {// x, y 随机分布var x = Math.random() * 100 - 50;var y = Math.random() * 100 - 50;var z = gaussian(x, y);data.push([x, y, z]);}// 指定图表的配置项和数据var option = {grid3D: {},xAxis3D: {},yAxis3D: {},zAxis3D: { max: 100 },series: [{type: 'scatter3D',data: data}]}myChart.setOption(option);

官方文档还是很清晰，实现也比较简单，接下来准备研究一下是否能实现3D地图效果

echarts-gl 初体验相关推荐

Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图最近沉迷P社的钢4,断断续续几天才做好效果预览 echart拿来做这种动态图还是不错的官网百度的echarts 仓库地址链接: link. h ...
Echarts GL 3d地图初体验，浙江天地图作为底图mapbox
网上看到一张图效果非常好,斜45度角模式的3d地图,用在大屏模式上非常有科技感,高端大气上档次. 于是,研究了下怎么做,发现Echarts GL能做出相似的描边3D效果,地图可以加载浙江天地图(如下图 ...
linux 拷机软件,拷机软件跑起来，OS X平台下OpenGL初体验
拷机软件跑起来,OS X平台下OpenGL初体验 2012-11-12 18:55:03 作者:tina Tag:Mac 热度:745℃ 苹果自成一套的体系可以尽情展示自家的技术水准,但是也会给一些程 ...
Polygon zkEVM的pil-stark Fibonacci状态机初体验
1. 引言前序博客: Polygon zkEVM 基本概念第5章 "一个例子--Fibonacci state machine" 实操主要见: 2022年8月8日Jordi B ...
[OpenGL ES 01]OpenGL ES之初体验
[OpenGL ES 01]OpenGL ES之初体验罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循"署名-非商业用途-保持一致"创作公用协议一 ...
苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...

echarts-gl 初体验

echarts-gl 初体验相关推荐

最新文章

热门文章