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

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

news 2025/9/21 5:52:44

在这里插入图片描述

😂博主：小猫娃来啦
😂文章核心：使用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

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/20 1:55:24

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/8/30 19:28:38

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/9/20 8:13:46

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/9/3 22:35:50

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/9/6 19:16:38

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2025/9/7 18:04:01

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/9/1 8:36:19