济南网站排名公司,软件开发需要什么技术,网页制作培训多钱,营销型网站免费企业网站模版用Echarts的柱状图实现圆柱体效果
在数据可视化的世界里#xff0c;Echarts凭借其强大的功能和丰富的特性#xff0c;成为众多开发者的首选工具。本文将深入探讨如何利用Echarts的柱状图来实现独特的圆柱体效果#xff0c;通过详细剖析代码#xff0c;让大家了解其中的实现…用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} width100% height100% /;
};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: categoryaxisLabel 设置轴标签颜色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 强大的定制能力和数据可视化魅力。在实际应用中可根据需求灵活调整配置和样式创造更精彩的数据可视化作品。
