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

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

news 2025/6/6 19:51: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

Python应用continue关键字初解

大家好!对于刚接触编程的初学者来说&#xff0c;理解循环控制语句是掌握编程语言的重要一步。在Python中&#xff0c;continue关键字是一个非常实用的循环控制工具&#xff0c;本文将通过简易示例帮助大家理解它的作用。 基本概念: continue关键字用于中断本次循环&#xff0c;…...

编程新知 2025/6/6 18:48:20

C++11 中 final 和 override 从入门到精通

文章目录 一、引言二、final 关键字2.1 final 关键字的基本概念2.2 final 关键字的语法2.3 final 关键字的使用示例2.3.1 防止类被继承2.3.2 防止虚函数被重写 2.4 final 关键字的使用场景2.5 final 关键字的注意事项 三、override 关键字3.1 override 关键字的基本概念3.2 ove…...

编程新知 2025/6/6 18:24:10

ABP VNext 在 Kubernetes 中的零停机蓝绿发布

ABP VNext 在 Kubernetes 中的零停机蓝绿发布 &#x1f680; &#x1f4da; 目录 ABP VNext 在 Kubernetes 中的零停机蓝绿发布 &#x1f680;&#x1f4cc; 一、前提准备 ℹ️&#x1f9f1; 二、项目结构与目标 &#x1f3af;&#x1f433; 三、多阶段 Dockerfile 构建 &#…...

编程新知 2025/6/6 15:57:58

windows编程实现文件拷贝

项目源码链接&#xff1a; 实现文件拷贝功能&#xff08;限制5GB大小&#xff09; 81c57de 周不才/cpp_linux study - Gitee.com 知识准备&#xff1a; 1.句柄 句柄是一个用于标识和引用系统资源&#xff08;如文件、窗口、进程、线程、位图等&#xff09;的值。它不是资…...

编程新知 2025/6/6 8:28:42

汽车加气站操作工证考试重点

汽车加气站操作工证考试重点 一、汽车加气站操作工证考试主要内容 汽车加气站操作工证是从事CNG&#xff08;压缩天然气&#xff09;和LNG&#xff08;液化天然气&#xff09;加气站作业人员的必备资格证书。随着新能源汽车的快速发展&#xff0c;该证书的市场需求持续增长&a…...

编程新知 2025/6/6 8:19:51

k8s集群安装坑点汇总

前言 由于使用最新的Rocky9.5,导致kubekey一键安装用不了&#xff0c;退回Rocky8麻烦机器都建好了&#xff0c;决定手动安装k8s&#xff0c;结果手动安装过程中遇到各种坑&#xff0c;这里记录下&#xff1b; k8s安装 k8s具体安装过程可自行搜索&#xff0c;或者deepseek; 也…...

编程新知 2025/6/6 6:37:42

Python 入门到进阶全指南：从语言特性到实战项目

一、Python 简介 Python 是一种高级、跨平台、解释型编程语言&#xff0c;以简洁语法和高可读性著称&#xff0c;既适合编程初学者快速入门&#xff0c;也能满足资深开发者的复杂需求。其核心特性与应用场景如下&#xff1a; 核心特性解析 解释型语言&#xff1a;无需编译即可…...

编程新知 2025/6/6 5:00:43

GlobalSign、DigiCert、Sectigo三种SSL安全证书有什么区别？

‌GlobalSign、DigiCert和Sectigo是三家知名的SSL证书颁发机构&#xff0c;其产品在安全性、功能、价格和适用场景上存在一定差异。选择SSL证书就像为你的网站挑选最合身的“安全盔甲”&#xff0c;核心是匹配你的实际需求&#xff0c;避免过度配置或防护不足。 一、核心特点对…...

编程新知 2025/6/5 23:33:31

MySQL补充知识点学习

书接上文&#xff1a;MySQL关系型数据库学习&#xff0c;继续看书补充MySQL知识点学习。 1. 基本概念学习 1.1 游标&#xff08;Cursor&#xff09; MySQL 游标是一种数据库对象&#xff0c;它允许应用程序逐行处理查询结果集&#xff0c;而不是一次性获取所有结果。游标在需…...

编程新知 2025/6/5 22:36:34

【Spark征服之路-2.1-安装部署Spark（一）】

实验目标&#xff1a; 本节课实验将完成Spark 4种部署模式的其中2种&#xff0c;分别是Local、Standalone模式。 实验准备工作&#xff1a; 三台linux虚拟机spark的压缩包 实验步骤&#xff1a; Spark-local Spark的Local模式仅需要单个虚拟机节点即可&#xff0c;无需启…...

编程新知 2025/6/5 19:05:32