echarts 3D示例 echart, echarts-gl

2024-03-29 07:20
文章标签 3d 示例 echarts echart gl

本文主要是介绍echarts 3D示例 echart, echarts-gl,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

echarts官网有很多的炫酷的3D模型

来尝试实现下,使用原本的柱状图或者折线图代码创建echarts示例,使用cdn的方式引入echarts

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><title>ECharts Pie Chart with Click Event</title></head><body><div id="pieChart" style="width: 600px; height: 400px"></div><script>const data = [{ value: 335, name: "Category 1" },{ value: 310, name: "Category 2" },{ value: 234, name: "Category 3" },{ value: 135, name: "Category 4" },{ value: 1548, name: "Category 5" },];// 初始化 ECharts 实例const myChart = echarts.init(document.getElementById("pieChart"));// 配置饼图const option = {series: [{name: "Pie Chart",type: "pie",radius: "55%",center: ["50%", "60%"],data: data,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],};// 将配置设置到 ECharts 实例中myChart.setOption(option);</script></body>
</html>

就会得到一个饼图

使用这个案例:Examples - Apache ECharts

在官网案例添加代码查看模型的数据

还需要引入echarts-gl的cdn, 应用中安装echarts-gl,只引入就好,不需要做额外的操作,会自动扩展echarts的功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script><title>ECharts Pie Chart with Click Event</title></head><body><divid="pieChart"style="width: 600px; height: 600px; border: 5px solid red"></div><script>const list = 这里放从官网复制过来的数组
// 初始化 ECharts 实例const myChart = echarts.init(document.getElementById("pieChart"));// 将配置设置到 ECharts 实例中let option = {grid3D: {},tooltip: {},xAxis3D: {type: "category",},yAxis3D: {type: "category",},zAxis3D: {},visualMap: {max: 1e8,dimension: "Population",},dataset: {dimensions: ["Income","Life Expectancy","Population","Country",{ name: "Year", type: "ordinal" },],source: list,},series: [{type: "bar3D",// symbolSize: symbolSize,shading: "lambert",encode: {x: "Year",y: "Country",z: "Life Expectancy",tooltip: [0, 1, 2, 3, 4],},},],};// 将配置设置到 ECharts 实例中myChart.setOption(option);</script></body>
</html>

看下是很大的

看下效果

这篇关于echarts 3D示例 echart, echarts-gl的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/857962

相关文章

pandas中位数填充空值的实现示例

《pandas中位数填充空值的实现示例》中位数填充是一种简单而有效的方法,用于填充数据集中缺失的值,本文就来介绍一下pandas中位数填充空值的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是中位数填充?为什么选择中位数填充?示例数据结果分析完整代码总结在数据分析和机器学习过程中,处理缺失数

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述:为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习:猜数字游戏猜数字前言有时候我们在

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字