用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 强大的定制能力和数据可视化魅力。在实际应用中，可根据需求灵活调整配置和样式，创造更精彩的数据可视化作品。