当前位置： 首页 > news >正文

echarts的图表立体感——实现立体柱状图和立体饼图的详细教程

news 2026/2/8 16:00:04

在这里插入图片描述

😂博主：小猫娃来啦
😂文章核心：使用echarts实现立体柱状图和立体饼图的详细教程

文章目录

  • 简单介绍立体柱状图和立体饼图
  • 环境配置
  • 实现立体柱状图
  • 实现立体饼图
  • 总结

简单介绍立体柱状图和立体饼图

立体柱状图和立体饼图是数据可视化中常用的图表类型，它们可以帮助我们更直观地理解和展示数据。立体柱状图通过在二维平面上表示数据的高度，给人一种立体感，使得数据的比较更加清晰明了。立体饼图则将饼图的扇区进行立体化呈现，使得整个图形更具立体感和层次感。

使用Echarts库可以方便地实现立体柱状图和立体饼图，该库是一个基于JavaScript的开源数据可视化库，提供了丰富的图表类型和交互功能。通过使用Echarts，我们可以轻松地创建、定制和呈现各种数据图表，包括立体柱状图和立体饼图。

在实际需求中，我们可能需要使用立体柱状图和立体饼图来展示具有立体感的数据图形。例如，可以用立体柱状图来展示不同城市的销售额，通过柱状图的高度以及立体效果来比较各个城市的销售情况。而立体饼图则可以用来展示不同产品类别的销售占比，通过立体效果使得饼图更加生动有趣。
在这里插入图片描述在这里插入图片描述
很炫酷，对吧，配就完事了。

环境配置

  • 下载Echarts库：可以从Echarts官网下载最新版本的库文件，解压后将echarts.js文件引入到HTML文件中。如果用框架，就npm安装就完事了。
  • 创建HTML和JavaScript文件：创建一个HTML文件，例如index.html，并在其中引入Echarts库。同时，创建一个JavaScript文件，例如main.js，用于编写图表的代码。

实现立体柱状图

<!-- index.html -->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>立体柱状图示例</title><script src="echarts.js"></script>
</head>
<body><div id="barChart" style="width: 600px; height: 400px;"></div><script src="main.js"></script>
</body>
</html>

// main.js
// 初始化Echarts实例
var barChart = echarts.init(document.getElementById('barChart'));// 配置立体柱状图的数据
var data = [120, 200, 150, 80, 70];// 配置立体柱状图的选项
var options = {title: {text: '立体柱状图示例'},xAxis: {data: ['A', 'B', 'C', 'D', 'E']},yAxis: {},series: [{name: '销量',type: 'bar',data: data,barWidth: 30, // 设置柱体宽度itemStyle: {emphasis: {barBorderRadius: 7 // 设置柱体边角的圆角}}}]
};// 渲染图表并呈现在页面中
barChart.setOption(options);

实现立体饼图

<!-- index.html -->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>立体饼图示例</title><script src="echarts.js"></script>
</head>
<body><div id="pieChart" style="width: 600px; height: 400px;"></div><script src="main.js"></script>
</body>
</html>

// main.js
// 初始化Echarts实例
var pieChart = echarts.init(document.getElementById('pieChart'));// 配置立体饼图的数据
var data = [{value: 335, name: 'A'},{value: 310, name: 'B'},{value: 234, name: 'C'},{value: 135, name: 'D'},{value: 1548, name: 'E'}
];// 配置立体饼图的选项
var options = {title: {text: '立体饼图示例',x: 'center'},series: [{name: '数据',type: 'pie',radius: '55%',data: data,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};// 渲染图表并呈现在页面中
pieChart.setOption(options);

将上面的HTML和JavaScript代码分别保存到index.html和main.js文件中，并确保它们在同一个目录下。然后在浏览器中运行一波，即可看到呈现了立体柱状图和立体饼图的页面。

总结

总的来说，使用Echarts库实现立体柱状图和立体饼图的步骤可以概括为以下几个要点：

  1. 准备HTML结构和容器，用于容纳图表的展示。
  2. 初始化Echarts实例，并将之前创建的容器关联起来。
  3. 配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。
  4. 配置图表的选项，包括样式、颜色和其他属性。
  5. 渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。

掌握Echarts库不仅可以帮助我们实现立体柱状图和立体饼图这样简单的可视化效果，还可以帮助我们创建复杂、精美的可视化界面，如关系图、地图等。因此，对于需要进行数据可视化的项目和工作，熟练掌握Echarts库是非常有必要的。需要注意的是，配置图表选项时需要根据具体需求定制和调整，以达到最佳的可视化效果。

ok，就说到这，希望对你有用。

在这里插入图片描述

相关文章：

echarts的图表立体感——实现立体柱状图和立体饼图的详细教程

&#x1f602;博主&#xff1a;小猫娃来啦 &#x1f602;文章核心&#xff1a;使用echarts实现立体柱状图和立体饼图的详细教程 文章目录 简单介绍立体柱状图和立体饼图环境配置实现立体柱状图实现立体饼图总结 简单介绍立体柱状图和立体饼图 立体柱状图和立体饼图是数据可视化…...

编程日记 2023/11/2 9:46:47

解决VSCode使用SSH远程连接时无法指定用户名的问题

Windows 11自带OpenSSH客户端&#xff0c;和VSCode配合得很好&#xff0c;没有这个问题。 今天要说的是旧版本Windows 7/8/10系统遇到的问题。 PS: Windows 7可以运行的最后版本是VSCode 1.80.2 由于Windows 7/8/10没有自带的OpenSSH客户端&#xff0c;但可以调用MSYS环境下的…...

编程日记 2023/11/2 9:45:46

Vue Camera是什么，如何用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一、Vue Camera是什么&#xff1f; Vue Camera是一个基于Vue.js的相机组件库&#xff0c;…...

编程日记 2023/11/2 9:44:45

ORANGE室内高尔夫—韩国室内模拟高尔夫原装进口真实体验身临其境

ORANGE室内高尔夫—韩国室内模拟高尔夫 真实体验 身临其境 室内高尔夫的产品优势&#xff1a; 1. 实际高尔夫球场的限制&#xff1a;室内高尔夫可以弥补室外高尔夫球场数量有限的问题&#xff0c;使得更多人能够享受高尔夫运动。 2. 天气和季节的限制&#xff1a;室内高尔夫可…...

编程日记 2023/11/2 9:43:42

【观察】从口袋到云端全景式AI创新，联想“全栈智能”再升级

知名科技杂志《连线》创始主编凯文凯利曾预测&#xff1a;“在未来的 100 年里&#xff0c;人工智能将超越任何一种人工力量&#xff0c;将人类引领到一个前所未有的时代。” 确实如此&#xff0c;犹如历史上蒸汽机、电力、计算机和互联网等通用技术一样&#xff0c;近20年来&a…...

编程日记 2023/11/2 9:42:40

linux 实用命令搜集 —— 筑梦之路

1. xargs命令 # 找出 / 目录下以 .conf 结尾的文件&#xff0c;并进行文件分类find / -name *.conf -type f -print | xargs file# 找出文件并打包find / -name *.conf -type f -print | xargs tar cjf test.tar.gz 2. 查找内存使用量较高的进程 ps -aux | sort -rnk 4 | he…...

编程日记 2023/11/2 9:41:39

08-Docker-网络管理

Docker 在网络管理这块提供了多种的网络选择方式&#xff0c;他们分别是桥接网络、主机网络、覆盖网络、MACLAN 网络、无桥接网络、自定义网络。 1-无桥接网络&#xff08;None Network&#xff09; 当使用无桥接网络时&#xff0c;容器不会分配 IP 地址&#xff0c;也不会连…...

编程日记 2023/11/2 9:40:37

【VS Code】使用 VS Code 登陆远程服务器上的 Docker 容器

以下命令默认已经构建了一个 Docker Image。 # 在服务器上启动 docker (-p 端口映射&#xff0c;用于后续的 ssh 连接) docker run -itd -v /mnt/mount/:/home -p 8124:22 --name container-name --gpus all image-name# 进入容器中 docker exec -it container-name /bin/bas…...

编程日记 2023/11/2 9:39:37

用Python做数据分析之数据统计

接下来说说数据统计部分&#xff0c;这里主要介绍数据采样&#xff0c;标准差&#xff0c;协方差和相关系数的使用方法。 1、数据采样 Excel 的数据分析功能中提供了数据抽样的功能&#xff0c;如下图所示。Python 通过 sample 函数完成数据采样。 2、数据抽样 Sample 是进行…...

编程日记 2023/11/2 9:38:36

智慧工地建造平台源码、智慧化工地云平台源码

概述&#xff1a;智慧工地管理平台充分运用数字化技术&#xff0c;聚焦施工现场岗位一线&#xff0c;依托物联网、互联网、AI等技术&#xff0c;围绕施工现场管理的人、机、料、法、环五大维度&#xff0c;以及施工过程管理的进度、质量、安全三大体系为基础应用&#xff0c;实…...

编程日记 2023/11/2 9:37:35

Spring Cloud Alibaba中Nacos的安装（Windows平台）以及服务的发现

Spring Cloud Alibaba中Nacos的安装&#xff08;Windows平台&#xff09;以及服务的发现 下载安装Nacos解压启动验证是否启动搭建一个简单的Spring Cloud Alibaba项目Spring Cloud Alibaba 以及 Nacos的引入如何选择对应的版本 服务的注册Nacos相关组件的说明 下载安装Nacos G…...

编程日记 2023/11/2 9:36:34

QR码应用实战：Spring Boot与ZXing完美结合

&#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 QR码应用实战&#xff1a;Spring Boot与ZXing完美结合 前言第一&#xff1a; 介绍QR码和ZXing第二&#xff1a;springboot整合zxing添加ZXing依赖生成二维码生成条形码 前言 …...

编程日记 2023/11/2 9:35:33

Leetcode刷题详解——两两交换链表中的节点

1. 题目链接&#xff1a;24. 两两交换链表中的节点 2. 题目描述&#xff1a; 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 …...

编程日记 2023/11/2 9:34:31

Openssl数据安全传输平台019：外联接口类的封装以及动态库的制作 - Bug未解决，感觉不是代码的问题

文章目录 1 外联接口1.1 接口类的封装1.2 共享内存与配置文件 2 json格式配置文件的定义2.1 共享内存中存储的节点结构2.2 服务器端配置文件2.3 客户端配置文件2.4 改进配置文件 3 共享内存类修改4 将接口打包成库(静态/动态)4.1 相关的指令4.1.1 静态库4.1.2 动态库 4.2 外联接…...

编程日记 2023/11/2 9:33:29

YOLO目标检测——安全帽佩戴检测数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;安全帽佩戴检测数据集可以用于实时检测工作人员是否按照要求佩戴了安全帽&#xff0c;以保障他们的安全数据集说明&#xff1a;安全帽佩戴检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;图片分为带头盔和没带头…...

编程日记 2023/11/2 9:32:28

P4345 [SHOI2015] 超能粒子炮·改 题解---------Lucas定理

题面&#xff1a; 题目 题意概括&#xff1a; T T T 次询问&#xff0c;每次给出 n , k n,k n,k&#xff0c;求 ∑ i 0 k C n i % 2333 \sum_{i 0}^{k} C_{n}^{i} \ \% \ 2333 ∑i0k​Cni​ % 2333。 1 ≤ T ≤ 1 0 5 &#xff0c; 1 ≤ n , k ≤ 1 0 18 1\leq T \leq10^5…...

编程日记 2023/11/2 9:31:27

http代理和ip代理的区别，代理IP带来了哪些好处？

随着互联网的快速发展&#xff0c;代理IP和HTTP代理已成为网络爬虫、网络营销、数据抓取等领域中不可或缺的一部分。但是&#xff0c;很多人在使用代理IP和HTTP代理时并不清楚两者的区别&#xff0c;以及代理IP所带来的好处。本文将详细介绍这两者之间的差异&#xff0c;以及代…...

编程日记 2023/11/2 9:30:26

浅谈电动汽车充电桩检测技术的实现

叶根胜 安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a; 关键词&#xff1a;电动直流和交流充电桩是我国电动汽车充电桩中运行量较大的一种。为了保持正常运行和使用&#xff0c;应高度重视检测、运行和维护工作。因此&#xff0c;有关部门应做好充电桩的检测工作…...

编程日记 2023/11/2 9:29:26

20 分钟搭建一个串流服务器

步骤1&#xff1a;准备Nginx RTMP容器 首先&#xff0c;您可以使用官方的Nginx RTMP Docker镜像来创建Nginx RTMP容器。运行以下命令&#xff1a; docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp 这将在后台运行Nginx RTMP容器&#xff0c;将本地1935端…...

编程日记 2023/11/2 9:28:24

Android ActivityLifecycleCallback使用

在 Android 开发中&#xff0c;ActivityLifecycleCallbacks 是一个接口&#xff0c;用于监听和管理应用程序中 Activity 的生命周期事件。通过实现 ActivityLifecycleCallbacks 接口&#xff0c;可以在 Activity 的创建、启动、暂停、恢复、停止和销毁等各个阶段执行相应的操作…...

编程日记 2023/11/2 9:27:23

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/8 4:37:22

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2026/2/8 5:05:41

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/9/20 11:57:48