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

已于 2023-05-19 08:43:25 修改
阅读量3.7k 收藏 24
点赞数 4
分类专栏： echarts 文章标签： echarts 前端 javascript
于 2023-05-13 16:28:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35432583/article/details/130658850
版权

如果需要复杂的图表样式，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", // 覆盖基础样式
        },
      },
    ],
  };
}

效果图

在这里插入图片描述

参考

Locke-zk
关注
  • 4
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts里type为custom，自定义配置renderItem为柱状形状
码上暴富
06-14 1623
echarts里type为custom，自定义配置renderItem为柱状形状echarts里type为custom，自定义配置renderItem为柱状形状 echarts里type为custom，自定义配置renderItem为柱状形状 主要功能：文本超过柱状形状就隐藏否则就显示，移入每一个柱状显示tooltip。 <!DOCTYPE html> <html lang=""> <head> <title>ECharts Custom Rend
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多
echarts自定义柱状图图形渲染，坐标轴指示器吸附在柱状图中间而不是最左侧
上山看海
11-06 1719
原本柱状图坐标轴指示器自动吸附数据trigger: 'axis',是吸附横坐标的最小值 将后端传入数据[min,max,high]改为[mid,min,max,high] for(int i = 0; i < classes.size(); i++) { if(classes.get(i).classifier_cell.size()>1) { ArrayList&l...
通过Echarts怎样实现立体柱状图
weixin_55123102的博客
02-22 6063
大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能复用的，没有做过这种立体形状的图表，打开echarts也没看到有相关的demo，看下如何实现`
echarts 柱状图【立体】
weixin_43957384的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
echarts自定义renderItem柱状图，每个系列柱子数不一样
热门推荐
Curry的博客
04-11 1万+
话不多说，先上图 业务需求是，在【前期库存中】，显示四年的数量；后面的1-12月每个系列中最多显示两个柱子。 在echarts官方实例中，系列的数量是由 series 数组中的数量决定的，也就是说该数组中有几个数据项，就有几根柱子，但是每个系列项的柱子数是一样的。这样是不满足我的需求的。所以接下来就要开始寻找其他解决方式。 后来发现了echarts提供了自定义的渲染方式，series-c...
Echarts可视化 之custom自定义系列
heal_l的博客
02-18 6159
renderItem函数
echarts实现3d柱状图的两种方式
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
《ECharts》伪立体柱状图
qq_42660374的博客
03-16 689
《ECharts》伪立体柱状图
详解Android自定义View--自定义柱状图
07-19
主要介绍了详解Android自定义View--自定义柱状图，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
绘制多条Markline 并拖动
05-30
在echart中设置多条markline，并可以拖动（结合graphic实现）实时更新markline位置。代码简单易懂，不晦涩。
echarts-省份地图+柱状图组合.zip
03-26
echarts 省份地图+柱状图组合。可以缩放，拖拽，很多朋友在找，现在分享给大家自己，做个参考吧，echarts版本3.3的，
echarts-柱状图-地图Demo.zip
11-07
Demo描述：柱状图表10s动态更新，地图图标10s动态更新业务相关的省份高亮（根据数据值所属Rang动态分配不同的高亮显示） Demo代码带注释，资源包括js/css/image/html Demo展示地址：...
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 218
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 503
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 967
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 166
两个前端标签
echarts-gl 柱状图
09-10
ECharts-GL 是 ECharts 的一个扩展模块，用于支持在 WebGL 上渲染图表。柱状图是 ECharts-GL 提供的一种图表类型之一。 要绘制柱状图，你可以使用 ECharts-GL 的 API 来设置数据和配置项。下面是一个简单的例子： ```javascript // 导入 ECharts-GL import * as echarts from 'echarts'; import 'echarts-gl'; // 初始化图表 const chart = echarts.init(document.getElementById('chart')); // 设置数据和配置项 const data = [ { name: 'A', value: 100 }, { name: 'B', value: 200 }, { name: 'C', value: 150 }, ]; const option = { grid3D: {}, xAxis3D: {}, yAxis3D: {}, zAxis3D: {}, series: [{ type: 'bar3D', data: data.map(item => [item.name, item.value]), }], }; // 渲染图表 chart.setOption(option); ``` 以上代码中，我们首先导入了 ECharts 和 ECharts-GL，然后通过 `echarts.init` 方法初始化了一个图表实例。接下来，我们设置了柱状图的数据和配置项，包括设置了 `grid3D`、`xAxis3D`、`yAxis3D` 和 `zAxis3D` 的配置，以及将数据传递给 `bar3D` 系列类型的 `data` 属性。最后，调用 `chart.setOption` 方法渲染图表。 你可以根据自己的需求，调整数据和配置项，来绘制符合你要求的柱状图。希望这能帮到你！如果有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值