用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 (
<div
style={{
width: '100%',
overflow: 'hidden',
boxSizing: 'border-box',
height: '100%'
}}
>
<StatisticsBarChart {...mockData} />
</div>
);
};
export default StatisticsBar;
StatisticsBar 组件创建一个 div 容器，设置样式并渲染 StatisticsBarChart 组件，传入模拟数据，在页面展示完整柱状图。
通过以上代码，我们成功利用 Echarts 实现了具有圆柱体效果的柱状图，展示了 Echarts 强大的定制能力和数据可视化魅力。在实际应用中，可根据需求灵活调整配置和样式，创造更精彩的数据可视化作品。