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

用Echarts的柱状图实现圆柱体效果

article 2025/2/19 15:11:18

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


http://www.kler.cn/a/546618.html

相关文章：

  • qt UI架构之MVD
  • VUE环境搭建
  • YOLOv11-ultralytics-8.3.67部分代码阅读笔记-plotting.py
  • vue2老版本 npm install 安装失败_安装卡主
  • 给本地模型“投喂“数据
  • 数组_移除元素
  • jenkins-获取当前时间戳
  • Bash 中的运算方式
  • 基于Spring Boot的视频点播系统设计与实现（LW+源码+讲解）
  • 智元机器人开源AgiBot World数据集：具身智能领域的“ImageNet时刻”
  • 计算机毕业设计——Springboot的社区维修平台
  • Unity下ML-Agents第一个示例
  • 【Android开发】安卓手机APP使用机器学习进行QR二维码识别（完整工程资料源码）
  • pgsql用户和权限管理
  • LLM论文笔记 6: Training Compute-Optimal Large Language Models
  • Unity使用反射进行Protobuf(CS/SC)协议,json格式
  • [隧道代理] 隧道代理 — 反弹 Shell - Bash 反弹 Shell
  • 「软件设计模式」建造者模式（Builder）
  • 深入浅出CSS复合选择器：掌控元素关系与层级选择
  • 冒泡排序的缺陷及优化