菜单 搜索
首页 前端知识 echarts - 自定义形状 - 实现立体柱状图

echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46 前端知识 前端哥 994 987 我要收藏

如果需要复杂的图表样式，echarts 自带的 series 类型无法满足，那么就可以使用 custom 类型，这时就需要通过 canvas 手动绘制图表的形状了。

知识准备

坐标

假如 echarts 的容器拥有 800*800 尺寸的大小。

在这里插入图片描述

那么，左上角是 (0,0 )，右上角是 (800, 0)，左下角是 (0, 800)，右下角是 (800, 800)。

在这里插入图片描述

value() 函数

仅考虑简单图表。

value() 函数官方说法是根据维度的名称或索引获取对应的数据值。

对于本示例来讲，就是用它获取 x 轴的数据值以及 y 轴的数据值。

value(0) 用于获取 x 轴数据。

value(1) 用于获取 y 轴数据。

获取 X 轴数据值

在本示例中，x 轴类型是 category，所以 value(0) 返回柱子的索引值。

在这里插入图片描述

上面一共有三个个柱子，每个柱子都有自己的索引值，从左至右，从 0 开始。

获取 Y 轴数据值

获取 y 轴数据要简单许多，value(1) 会返回每个柱子的数据值，如：100, 50, 20。

coord() 函数

仅考虑简单图表。

类型：coord([x, y])。

x 和 y 分别是 x 轴的数据值以及 y 轴的数据值。可以通过 value() 来获取。

coord() 函数的作用是根据 x 和 y 轴的数据值计算出坐标点。

renderItem

当 series 的类型为 custom 时，通过 renderItem 函数来绘制每个柱子的样子。伪代码：

const options = {
  series: [
    {
      type: "custom",
      data: [100, 50, 20],
      renderItem(params, api) {
        // ...
      }
    }
  ]
}
复制

params 和 api 参考官网：Echarts renderItem

value() 和 coord() 函数就在 api 对象下：api.value()、api.coord()。

在这个 series 下，data 有 3 个数据，那么 renderItem 就会执行 3 次。

  1. 第一次的数据值是 100。
  2. 第二次的数据值是 50。
  3. 第三次的数据值是 20。

对于 data 中的每个数据项，都会调用一次 renderItem。

函数格式如下：

function renderItem(params, api) {
  // ...
  
  return {
    // 我只用过 group
    type: "group",
    // 形状列表
    children: [
      {
        // 已注册的形状名称
        type: "shapeName",
        // 形状参数，会被传递给 extendShape 函数
        shape: {},
        // 形状的样式，可以通过 api.style() 函数来获取基础样式
        style: api.style(),
        // 也可以覆盖某个样式属性，例如单独为每个形状设置不通的背景
        style: {
          ...api.style(),
          fill: "red", // 覆盖基础样式中的 fill
        }
      }
    ]
  }
}
复制

扩展形状

在使用 renderItem 前，必须先使用 echarts.graphic.extendShape 函数来定义形状的样子。

const shapeName = echarts.graphic.extendShape({
  buildPath(ctx, shape) {
    // ...
  }
})
复制

ctx 可以获取到 canvas 的上下文，使用 canvas 来绘制形状。

shape 是使用时传递的 shape 对象数据。参考[renderItem](# 自定义类型)的返回值。

注册形状

要想在 renderItem 中使用形状，需要先扩展形状，最后注册形状。

echarts.graphic.registerShape('shapeName', shapeName);
复制

第一个参数是形状的名称，在使用时直接指定的这个名称即可。

第二个参数是扩展形状的变量名称，例如[扩展形状](# 扩展形状)中的变量名 shapeName。

基础柱状图

我们会将下面的柱状图改造成立体柱状图。

在这里插入图片描述

const options = {
  title: {
    text: "不同级别的忍者数量",
    textStyle: {
      color: "#fff",
    },
  },
 
  backgroundColor: "#000",
 
  xAxis: {
    type: "category",
    data: ["下忍", "中忍", "上忍"],
    axisLabel: {
      color: "#fff",
    },
  },
 
  yAxis: {
    type: "value",
    max: 200,
    axisLabel: {
      color: "#fff",
    },
    splitLine: {
      lineStyle: {
        color: "#222",
      },
    },
  },
 
  tooltip: {
    trigger: "axis",
  },
 
  series: [
    {
      type: "bar",
      data: [100, 50, 20],
      barWidth: 30,
    },
  ],
};
复制

立体柱状图解析

在这里插入图片描述

在立体柱状图中，一共有三面：左侧面、右侧面、顶面

每一面都对应一个形状，一共需要创建三个形状。

顶部基础 y 轴是顶面每个点坐标的基础计算值。

基础 x 轴是左侧面和右侧面每个点坐标的基础计算值。

斜角高度：从中心点到两个侧面顶角的高度。

中心点：是 coord([value(index, value)]) 计算后的坐标点。

分解

在这里插入图片描述

这些点就是我们要在 renderItem 中绘制的。

代码实现

修改 series，并创建 renderItem 函数：

function renderItem(params, api) {}
 
const options = {
  series: [
    {
      type: "custom",
      data: [100, 50, 20],
      renderItem,
    },
  ],
}
复制

然后先创建三个形状的空壳子，并注册：

const leftShape = echarts.graphic.extendShape({
  buildPath(ctx, shape) {},
});
 
const rightShape = echarts.graphic.extendShape({
  buildPath(ctx, shape) {},
});
 
const topShape = echarts.graphic.extendShape({
  buildPath(ctx, shape) {},
});
 
echarts.graphic.registerShape("leftShape", leftShape);
echarts.graphic.registerShape("rightShape", rightShape);
echarts.graphic.registerShape("topShape", topShape);
复制

完善 renderItem 函数，获取基础坐标并将坐标传递给自定义形状中：

function renderItem(params, api) {
  // 基础坐标
  const basicsCoord = api.coord([api.value(0), api.value(1)]);
  // 顶部基础 y 轴
  const topBasicsYAxis = basicsCoord[1];
  // 基础 x 轴
  const basicsXAxis = basicsCoord[0];
  // 底部 y 轴
  const bottomYAxis = api.coord([api.value(0), 0])[1];
 
  return {
    type: "group",
    children: [
      {
        type: "leftShape",
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis,
        },
        style: api.style(),
      },
      {
        type: "rightShape",
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis,
        },
        style: api.style(),
      },
      {
        type: "topShape",
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis,
        },
        style: api.style(),
      },
    ],
  };
}
复制

完善 leftShape 形状逻辑：

const leftShape = echarts.graphic.extendShape({
  buildPath(ctx, shape) {
    const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
    // 侧面宽度
    const WIDTH = 15;
    // 斜角高度
    const OBLIQUE_ANGLE_HEIGHT = 3.6;
 
    const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
    const p2 = [basicsXAxis - WIDTH, bottomYAxis];
    const p3 = [basicsXAxis, bottomYAxis];
    const p4 = [basicsXAxis, topBasicsYAxis];
 
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);
  },
});
复制

完善 rightShape 形状逻辑：

const rightShape = echarts.graphic.extendShape({
  buildPath(ctx, shape) {
    const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
    // 侧面宽度
    const WIDTH = 15;
    // 斜角高度
    const OBLIQUE_ANGLE_HEIGHT = 3.6;
 
    const p1 = [basicsXAxis, topBasicsYAxis];
    const p2 = [basicsXAxis, bottomYAxis];
    const p3 = [basicsXAxis + WIDTH, bottomYAxis];
    const p4 = [basicsXAxis + WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT];
 
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);
  },
});
复制

完善 topShape 形状逻辑：

const topShape = echarts.graphic.extendShape({
  buildPath(ctx, shape) {
    const { topBasicsYAxis, basicsXAxis } = shape;
    // 侧面宽度
    const WIDTH = 15;
    // 斜角高度
    const OBLIQUE_ANGLE_HEIGHT = 3.6;
 
    const p1 = [basicsXAxis, topBasicsYAxis];
    const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
    const p3 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
    const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
 
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);
  },
});
复制

最后为每个面都设置不同的颜色装饰一下：

function renderItem(params, api) {
  // 柱子索引值
  const { seriesIndex } = params;
 
  // 基础坐标
  const basicsCoord = api.coord([api.value(seriesIndex), api.value(1)]);
  // 顶部基础 y 轴
  const topBasicsYAxis = basicsCoord[1];
  // 基础 x 轴
  const basicsXAxis = basicsCoord[0];
  // 底部 y 轴
  const bottomYAxis = api.coord([api.value(seriesIndex), 0])[1];
 
  return {
    type: "group",
    children: [
      {
        type: "leftShape",
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis,
        },
        style: {
          ...api.style(),
          fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(34, 7, 94, 1)" },
            { offset: 1, color: "rgba(0, 0, 0, 0.26)" },
          ]), // 覆盖基础样式
        },
      },
      {
        type: "rightShape",
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis,
        },
        style: {
          ...api.style(),
          fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(57, 16, 133, 1)" },
            { offset: 1, color: "rgba(0, 0, 0, 0.26)" },
          ]), // 覆盖基础样式
        },
      },
      {
        type: "topShape",
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis,
        },
        style: {
          ...api.style(),
          fill: "#722ed1", // 覆盖基础样式
        },
      },
    ],
  };
}
复制

效果图

在这里插入图片描述

参考

  • 通过Echarts怎样实现立体柱状图
转载请注明出处或者链接地址：https://www.qianduange.cn//article/850.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

初中生物新课标教师学习心得2000字

2024-02-12 01:02:47

2023年初中生物新课标教师学习心得 2000字

2024-02-12 00:02:17

2023年初中生物新课标教师学习心得 1500字

2024-02-12 00:02:37

2023年初中生物新课标教师学习心得1000字

2024-02-12 00:02:56

2023年初中生物新课标学习心得1000字

2024-02-12 00:02:27

孩子成绩很差，请写一份家长通知书

2024-02-12 00:02:18

我喜欢别人的老婆怎么办

2024-02-12 00:02:58

如何治疗hpv

2024-02-12 00:02:27

如何治疗灰指甲

2024-02-12 00:02:07

如何治疗前列腺炎

2024-02-12 00:02:42

广告位招租：QQ85750956
大家推荐的文章
1

移动端css布局大全

2024-02-06 15:02:421000
2

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
3

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
4

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
5

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
6

如何利用浏览器测试跨域

2024-02-11 10:02:28998
7

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
8

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995
9

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995
10

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！