用Echarts的柱状图实现圆柱体效果
用Echarts的柱状图实现圆柱体效果
在数据可视化的世界里,Echarts凭借其强大的功能和丰富的特性,成为众多开发者的首选工具。本文将深入探讨如何利用Echarts的柱状图来实现独特的圆柱体效果,通过详细剖析代码,让大家了解其中的实现原理和技巧。
最终结果
1. 前期准备
在开始编写代码前,我们需要引入必要的依赖。代码中通过以下方式引入相关模块:
import CommonChart from '../../CommonChart';
import { EChartOption } from '../../utils/EChartOption';
import * as echarts from 'echarts';
CommonChart
可能是一个自定义的图表组件,对 Echarts 进行了进一步封装,方便在项目中使用。EChartOption
导入了 Echarts 的配置选项类型定义,而 echarts
库则是实现图表的核心。
2. 数据结构与模拟数据
为了展示充电和放电数据在不同电站的分布情况,我们定义了如下数据结构和模拟数据:
interface StatisticsBarChartProps {chargingList: number[];dischargingList: number[];timeList: string[];
}const mockData: StatisticsBarChartProps = {chargingList: [36, 20, 30, 30, 16],dischargingList: [20, 16, 20, 20, 8],timeList: ['电站1', '电站2', '电站3', '电站4', '电站5']
};
StatisticsBarChartProps
接口描述了数据结构,包含充电量列表 chargingList
、放电量列表 dischargingList
和电站名称列表 timeList
。mockData
则是符合该接口结构的模拟数据,用于测试和演示。
3. 核心组件 - StatisticsBarChart
StatisticsBarChart
组件是实现圆柱体效果柱状图的关键部分。
const StatisticsBarChart = (props: StatisticsBarChartProps) => {const { chargingList, dischargingList, timeList } = props;const option = {animation: false,grid: {bottom: '15%',left: '12.5%',top: '20%',right: '10%'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',label: {backgroundColor: '#283b56'}}},legend: {top: '0%',left: 'right',textStyle: {color: '#fff'},itemHeight: 8,itemWidth: 8,itemGap: 16,data: [{name: '充电',icon: 'circle',itemStyle: {color: 'rgba(82, 223, 142, 1)'}},{name: '放电',icon: 'circle',itemStyle: {color: 'rgba(255, 157, 0, 1)'}}]},xAxis: {type: 'category',axisLabel: {color: '#fff'},data: timeList},yAxis: [{type: 'value',scale: true,name: '电量/MWh',min: 0,interval: 10,splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.19)',width: 1,type: 'dashed'}},axisLine: {show: false,lineStyle: {color: '#fff'}},nameTextStyle: {color: '#fff',padding: [3, 4, 5, 10]}}],series: [{name: '充电',type: 'bar',barWidth: 14,label: {show: true,position: 'top',color: '#fff'},itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset:0,color: 'rgba(82, 223, 142, 0)'},{offset: 1,color: 'rgba(82, 223, 142, 0.5)'}],global: false}},data: chargingList},{name: '放电',type: 'bar',barWidth: 14,label: {show: true,position: 'top',color: '#fff'},itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset:0,color: 'rgba(250, 157, 0, 0)'},{offset: 1,color: 'rgba(255, 157, 0, 0.5)'}],global: false}},data: dischargingList,barGap: '30%'},{type: 'custom',tooltip: {show: false},renderItem: (params: echarts.CustomSeriesRenderItemParams, api: echarts.CustomSeriesRenderItemAPI) => {var value = api.value(1);var endPoint = api.coord([api.value(0), value]);var ellipseX = endPoint[0];var ellipseY = endPoint[1];return {type: 'ellipse',shape: {cx: ellipseX - 9,cy: ellipseY + 2,rx: 7,ry: 4},style: {fill: 'rgba(82, 233, 142, 1)',shadowBlur: 4,shadowColor: 'rgba(82, 223, 142, 1)',shadowOffsetX: 0,shadowOffsetY: 0}};},encode: {x: 0,y: 1},data: mockData.chargingList.map(function (val, idx) {return [idx, val];})},{type: 'custom',tooltip: {show: false},renderItem: (params: echarts.CustomSeriesRenderItemParams, api: echarts.CustomSeriesRenderItemAPI) => {var value = api.value(1);var endPoint = api.coord([api.value(0), value]);var ellipseX = endPoint[0];var ellipseY = endPoint[1];return {type: 'ellipse',shape: {cx: ellipseX + 9,cy: ellipseY,rx: 7,ry: 4},style: {fill: 'rgba(255, 157, 0, 1)',shadowBlur: 4,shadowColor: 'rgba(255, 157, 0, 1)',shadowOffsetX: 0,shadowOffsetY: 0}};},encode: {x: 0,y: 1},data: mockData.dischargingList.map(function (val, idx) {return [idx, val];})}]} as EChartOption;return <CommonChart option={option} width="100%" height="100%" />;
};
3.1 图表整体配置
- 动画设置:
animation: false
关闭了图表的动画效果,提升性能,减少视觉干扰。 - 网格布局:
grid
属性通过设置bottom
、left
、top
和right
值,精确控制图表在容器中的位置和大小。 - 提示框:
tooltip
配置了鼠标悬停提示框,trigger: 'axis'
表示坐标轴触发,axisPointer
设置了提示框样式和指针类型为shadow
,并定义了标签背景颜色。
3.2 图例设置
- 位置与样式:
legend
中,top: '0%'
和left: 'right'
将图例置于右上角,textStyle
设置文本颜色为白色,还设置了图例项的高度、宽度和间距。 - 自定义形状和颜色:
data
数组中,对 “充电” 和 “放电” 图例设置icon: 'circle'
为圆形,并分别设置不同颜色以区分数据系列。
3.3 坐标轴设置
- X轴:
xAxis
为分类轴,type: 'category'
,axisLabel
设置轴标签颜色,data
传入电站名称列表作为刻度值。 - Y轴:
yAxis
是数值轴,type: 'value'
,开启自动缩放scale: true
,设置名称、最小值、刻度间隔,以及分割线和坐标轴名称的样式。
3.4 柱状图系列设置
- 充电柱状图:第一个
series
定义充电数据柱状图,设置名称、类型、柱子宽度、数据标签和颜色渐变,通过线性渐变模拟圆柱体光影效果。 - 放电柱状图:类似充电柱状图,设置放电数据柱状图,不同的是柱子间隙
barGap: '30%'
和颜色渐变。
3.5 实现圆柱体效果 - 自定义图形绘制
通过 custom
系列的 renderItem
函数在柱状图顶部绘制椭圆模拟圆柱体顶部。
- 充电椭圆绘制:第三个
series
为自定义系列,获取数据点数值和坐标,绘制带有阴影的椭圆,颜色与充电柱状图一致。 - 放电椭圆绘制:第四个
series
类似,绘制放电柱状图顶部椭圆,颜色对应放电柱状图。
最后,组件返回 CommonChart
并传入配置好的 option
,设置宽度和高度为 100% 自适应容器。
4. 页面展示组件 - StatisticsBar
const StatisticsBar = () => {return (<divstyle={{width: '100%',overflow: 'hidden',boxSizing: 'border-box',height: '100%'}}><StatisticsBarChart {...mockData} /></div>);
};export default StatisticsBar;
StatisticsBar
组件创建一个 div
容器,设置样式并渲染 StatisticsBarChart
组件,传入模拟数据,在页面展示完整柱状图。
通过以上代码,我们成功利用 Echarts 实现了具有圆柱体效果的柱状图,展示了 Echarts 强大的定制能力和数据可视化魅力。在实际应用中,可根据需求灵活调整配置和样式,创造更精彩的数据可视化作品。
相关文章:

用Echarts的柱状图实现圆柱体效果
用Echarts的柱状图实现圆柱体效果 在数据可视化的世界里,Echarts凭借其强大的功能和丰富的特性,成为众多开发者的首选工具。本文将深入探讨如何利用Echarts的柱状图来实现独特的圆柱体效果,通过详细剖析代码,让大家了解其中的实现…...
Docker 常用命令基础详解(一)
一、Docker 初相识 在当今数字化时代,软件开发和部署的效率与灵活性成为了关键因素。Docker,作为一款开源的应用容器引擎,犹如一颗璀璨的明星,照亮了软件开发与部署的道路,为开发者们带来了前所未有的便利。它就像是一…...

Java并发中的CAS机制:原理、应用与挑战(通俗易懂版)
上一期文章内容:Java并发中的乐观锁与悲观锁, 本期文章我们来讲一下Java并发中的CAS机制 一、从银行账户案例理解CAS CAS 是一种乐观锁机制,用于在不使用锁的情况下实现多线程对共享资源的并发访问。 它包含三个操作数:内存位置&a…...

腾讯发布混元-3D 2.0: 首个开源高质3D-DiT生成大模型
在之前的文章中已经和大家介绍过腾讯HunYuan-3D 1.0,感兴趣的小伙伴可以点击下面链接阅读~ HunYuan-3D 是首个开源高质3D-DiT生成大模型,几何与纹理解藕生成,一键将创意具象化。 2.0模型架构图及介绍 2.0模型将几何和纹理生成解耦࿰…...
【机器学习】线性回归与一元线性回归
线性回归与一元线性回归 V1.1线性回归问题线性方程的最优解一元线性回归一元线性回归的方程一元线性回归距离衡量方法一元线性回归的最优化求解一元线性回归的最小二乘法解法 V1.1 线性回归问题 线性回归问题就是找一条线或超平面,并使用线或超平面来描述数据分布…...
哈希表-两个数的交集
代码随想录-刷题笔记 349. 两个数组的交集 - 力扣(LeetCode) 内容: 集合的使用 , 重复的数剔除掉,剩下的即为交集,最后加入数组即可。 class Solution {public int[] intersection(int[] nums1, int[] nums2) {Set<Integer…...

望远镜成像系统--科学评价光学镜头
望远镜是一种利用透镜或反射镜以及其他光学器件观测遥远物体的光学仪器。其原理是通过透镜的折射或反射镜的反射,将光线聚焦成像,再经过一个放大目镜进行观察。日常生活中的光学望远镜又称“天文望远镜”。1608年,荷兰的一位眼镜商汉斯利伯希…...
服务器延迟给视频网站造成的影响
在数字化时代中,网络视频已经成为人们日常娱乐和获取信息的重要平台,网络视频的流畅性会影响着用户的体验度,那么,当服务器出现延迟会对视频网站造成哪些影响呢?本文就来共同了解一下吧! 当所使用的服务器由…...

C++算法竞赛基础语法-9
快速排序是一种高效的排序算法,由C. A. R. Hoare在1960年提出,基本思想是分治法(Divide and Conquer)策略,通过递归将一个大问题分解为若干个较小的子问题,然后合并这些子问题的解来解决原始问题 快速排序…...

国产编辑器EverEdit - 极简追梦人的福音:迷你查找
1 迷你查找 1.1 应用场景 某些场景下,用户不希望调出复杂的查找对话框,此时可以使用迷你查找窗口。 1.2 使用方法 选择主菜单查找 -> 迷你查找,或使用快捷键Ctrl Alt F,会在右上角弹出迷你查找窗口,如下图所示…...
Flutter 异步编程利器:Future 与 Stream 深度解析
目录 一、Future:处理单次异步操作 1. 概念解读 2. 使用场景 3. 基本用法 3.1 创建 Future 3.2 使用 then 消费 Future 3.3 特性 二、Stream:处理连续异步事件流 1. 概念解读 2. 使用场景 3. 基本用法 3.1 创建 Stream 3.2 监听 Stream 3.…...

数据结构 day05
数据结构 day05 5. 队列5.3. 链式队列5.3.1. 特征5.3.2. 代码实现 6. 双向链表6.1. 特性6.2. 代码实现 5. 队列 5.3. 链式队列 5.3.1. 特征 逻辑结构:线性结构 存储结构:链式存储 操作:创建、入列、出列、判空、清空 5.3.2. 代码实现 头文…...
股票数据接口API实例代码python、JAVA等多种语言演示免费获取实时数据、历史数据、CDMA、KDJ等指标数据配有API说明文档
本文中所有接口均可直接在浏览器打开获取数据,为了便于大家验证有效性,已经做好了超链接,直接点击即可! 沪深两市股票列表 API接口链接(可点击验证):https://api.mairui.club/hslt/list/b…...

【Map vs Set】:Java数据存储的“双子星”对决
个人主页:♡喜欢做梦 欢迎 👍点赞 ➕关注 ❤️收藏 💬评论 目录 🍰一、搜索 🍮1.概念 🍮2.模型 🍰二、Map 🍨1.什么是Map? 🍨2.Map的实例化 &…...

ollama+langchain+deepseek本机跑通大模型
一、部署deepseek Ollama,这是是一个开源的大语言模型平台,它允许用户在本地环境中运行、创建和共享大型语言模型。Ollama提供了丰富的功能和特性,使得用户可以在自己的计算机上轻松地部署和运行大型语言模型。官网:https://ollam…...

03【FreeRTO队列-如何获取任务信息与队列的动静态创建】
一.利用 vTaskList()以及 vTaskGetRunTimeStats()来获取任务的信息 1.现象与开启启用宏 freeRTOSConfig.h //必须启用 #define configUSE_TRACE_FACILITY 1 #define configGENERATE_RUN_TIME_STATS 1 #define configUSE_STATS_FORMATTING_FUNCTIONS…...

vue-plugin-hiprint (vue2
页面效果 <template><div><div class="d-flex flex-column mt5"><div class="d-flex flex-row " style="margin-bottom: 10px;justify-content: center;"><!-- 纸张大小 A3、A4 等 --><div class="paper…...
【后端面试总结】什么是堆,什么是栈
堆与栈:计算机科学中的两大内存管理利器 在计算机科学中,内存管理是软件开发的核心组成部分之一。其中,堆(Heap)和栈(Stack)是两种最基本的内存分配方式,它们各自有着独特的特性和应…...

第39周:猫狗识别 2(Tensorflow实战第九周)
目录 前言 一、前期工作 1.1 设置GPU 1.2 导入数据 输出 二、数据预处理 2.1 加载数据 2.2 再次检查数据 2.3 配置数据集 2.4 可视化数据 三、构建VGG-16网络 3.1 VGG-16网络介绍 3.2 搭建VGG-16模型 四、编译 五、训练模型 5.1 上次程序的主要Bug 5.2 修改版…...
力扣--239.滑动窗口最大值
问题 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1: 输入:nums [1,3,-1,-3,5,3,6,7], …...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...

STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数(接收函数) sendto函数(发送函数) 五、网络编程之 UDP 用…...