使用echarts模拟立体柱形图

最新推荐文章于 2024-09-14 08:42:04 发布

呱呱•.•

最新推荐文章于 2024-09-14 08:42:04 发布

阅读量4.6k

点赞数 4

分类专栏： # JavaScript 文章标签： canvas js

本文链接：https://blog.csdn.net/alisa_lisa/article/details/106363385

版权

本文介绍了如何利用Echarts的graphic组件和自定义shape来模拟立体柱形图。重点强调需使用Echarts v4.4.0以上版本，并详细讲解了相关API如graphic.registerShape，以及renderItem函数的params参数，包括api.coord和api.style的用法。通过这些，读者可以了解到如何组合图形元素创建所需图表。

摘要由CSDN通过智能技术生成

注意：请使用echarts v4.4.0以上版本

相关配置项介绍

renderItem 函数提供了两个参数：

params：包含了如下信息：

参数	数据类型	说明
context:	Object	一个可供开发者暂存东西的对象。生命周期只为：当前次的渲染
seriesId	string	本系列 id
seriesName:	string	本系列 name
seriesIndex	number	本系列 index
dataIndex	number	数据项的 index
dataIndexInside	number	数据项在当前坐标系中可见的数据的 index
dataInsideLength	number	当前坐标系中可见的数据长度
actionType	string	触发此次重绘的 action 的 type

api：是一些开发者可调用的方法集合（如 api.value()、api.coord()）。

api.coord ——将数据值映射到坐标系上，画布上的点的坐标，至少包含：[x, y]
api.style ——定义的样式信息和视觉映射得到的样式信息，以下为部分参考：

名称	类型	默认值	描述
culling	boolean	false	是否进行裁剪
progressive	number	-1	是否渐进式渲染
fill	string	‘#000’	描边样式
stroke	string	‘#000’	填充样式
opacity	string	null	不透明度
lineDash	number	null	描边虚线样式
text	string	null	在图形中显示的文字
font	string	null	文字样式

上代码😄

var MyCubeRect = echarts.graphic.extendShape({
   
    shape: {
   
        x: 0,
        y: 0,
        width: 24, //柱宽        
        zWidth: 4, //阴影折角宽        
        zHeight: 0, //阴影折角高 
    },
    buildPath: function (ctx, shape) {
   
        const api = shape.api;
        //坐标系列
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x, shape.y];
        const p1 = [shape.x - 15, shape.y];
        const p4 = [shape.x + 15, shape.y];
        const p2 = [xAxisPoint[0] - 15, xAxisPoint[1]];
        const p3 =