我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Echarts自定义图形的方法参考

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Echarts自定义图形的方法参考

前言

在一个前端大屏项目中,有一个模块使用到了自定义的,由三个面组成的伪3D柱形图。在此处记录一下,方便后续自定义的时候参考一下。涉及到了zrender里面的一些方法,还特意去zrender看了些示例和文档。

1.自定义图形最后的效果是这样的:

图形由三个面组成,需要定义三个形状。用cubeleft,cubetop,cuberight来分别定义左侧面,顶部面以及右侧面。

2.注册自定义的图形

 echarts官方文档处:Documentation - Apache ECharts

我们需要定义一个这样的类,然后再通过echarts来注册这个类,后续就可以通过类名来使用了。

3.extendShape

            // 绘制左侧面
            const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function(ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint
                        const c0 = [shape.x, shape.y]
                        const c1 = [shape.x - 13, shape.y - 13]
                        const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
                        const c3 = [xAxisPoint[0], xAxisPoint[1]]
                        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
                    }
             })
            // 绘制右侧面
            const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function(ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint
                        const c1 = [shape.x, shape.y]
                        const c2 = [xAxisPoint[0], xAxisPoint[1]]
                        const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
                        const c4 = [shape.x + 18, shape.y - 9]
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    }
                })
            // 绘制顶面
            const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function(ctx, shape) {
                        const c1 = [shape.x, shape.y]
                        const c2 = [shape.x + 18, shape.y - 9]
                        const c3 = [shape.x + 5, shape.y - 22]
                        const c4 = [shape.x - 13, shape.y - 13]
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    }
             })

 这段代码主要是看buildpath如何使用,zrender的官方文档中,并没有直接告诉这个方法的两个参数是干什么用的,只给了一个示例,从这个示例中,可以知道这两个参数具体怎么用。

示例网址:https://github.com/ecomfe/zrender/blob/master/test/pin.html

第一个参数是path,第二参数是shape。path可以理解为一个canvas中的绘制画笔,可以设置路径并且闭合路径。

第二个参数在echarts中,是自定义的custom传递过来的,因此可以通过这个对象获取到我们一个很熟悉的属性 xAxisPoint。

绘制的两个面中,只有左侧和右侧面需要有填充高度,顶部不需要,所以顶部的形状就没有使用xAxisPoint这个属性。

这也是很好理解的,因为我们自定义的伪圆柱体里面的填充物肯定是有一个高度的。填充多少根据我们的数据来知道,让它看起来确实是被某种东西从底部开始增多填充了。

拿比较简单的顶部来举例:

buildPath: function(ctx, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + 18, shape.y - 9]
    const c3 = [shape.x + 5, shape.y - 22]
    const c4 = [shape.x - 13, shape.y - 13]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0],c4[1]).closePath()
}

绘制的四边形,其实就是四个顶点,我们只需要用moveTo来控制路径就行,在最后那个点进行闭合就行。偏移量是固定的值,可以根据情况自己去设置不同的值来扭曲这个四边形。

其中c1是底部的顶点,c2是右侧的顶点,c3是顶部的顶点,c4是右侧的顶点。其他两个面也是类似的。

4.使用echarts注册这三个图形

                // 注册三个面图形
            echarts.graphic.registerShape('CubeLeft', CubeLeft)
            echarts.graphic.registerShape('CubeRight', CubeRight)
            echarts.graphic.registerShape('CubeTop', CubeTop)

5.使用自定义的形状

其他的数据都和正常使用echarts一样,不同的地方在于series的配置。

series数组中,总共放置二个对象。第一个对象如下:

{
                type: 'custom',
                renderItem: function(params, api) {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: 'rgba(47,102,192,.27)',
                                stroke: 'black'
                            },
                            z2: 999
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: 'rgba(59,128,226,.27)',
                                stroke: 'black'
                            },
                            z2: 999
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: 'rgba(72,156,221,.27)',
                                stroke: 'black'
                            },
                            z2: 999
                        }]
                    }
                },
                data: MAX
}

最主要的还是renderItem里面的逻辑,这个方法返回一个对象,对象就是我们自定义的一个group组。renderItem可以返回的对象在文档中都有说明:Documentation - Apache ECharts

我们定义的那三个面,需要把它看成一个整体,所以renderItem返回的是一个类型为group的对象,另外三个形状作为children保存在数组中。

其中的shape参数,会在buildpath中使用到。

style中设置了它的填充颜色和边框线颜色。然后使用z2定义这个echarts的显示层级为最上级。如果不使用它,下面用于填充的会将其遮挡住。

这里也只是定义了第一个自定义的形状,也就是最外层的那个伪3d柱体。第二个自定义形状是要填充的形状。

{
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    var color = new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, [{
                                offset: 1,
                                color: "#FEFD53"
                            },
                            {
                                offset: 0,
                                color: "#f7c824"
                            }
                        ]
                    );
                    return {
                        type: 'group',
                        children: [{
                            type: 'CubeLeft',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color,
                                stroke: 'red'
                            }
                        }, {
                            type: 'CubeRight',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color,
                                stroke: 'red'
                            }
                        }, {
                            type: 'CubeTop',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: color,
                                stroke: 'red'
                            }
                        }]
                    }
                },
                data: VALUE
}

内部填充的图形,使用了一个线性渐变的颜色用来填充。边框线使用红色。与第一个不同的是,style里面的风格,以及data使用的数据。这里的data使用value具体的数值。而外壳的图形使用的数据是max最大值。这样就会有一个渐变颜色填充的红色边框图形,填充到了一个黑色边框的柱体中。

这样就自定义好了一个视觉上的3d柱体形状的图表了。

总结

到此这篇关于Echarts自定义图形的文章就介绍到这了,更多相关Echarts自定义图形内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Echarts自定义图形的方法参考

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Echarts自定义图形的方法参考

在使用ECharts绘制折线图时,为了丰富图表的视觉表达,设计师们常常会为视图搭配上不同的图标,下面这篇文章主要给大家介绍了关于Echarts自定义图形的方法参考,需要的朋友可以参考下
2023-02-23

Echarts怎么自定义图形

本篇内容主要讲解“Echarts怎么自定义图形”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Echarts怎么自定义图形”吧!1.自定义图形最后的效果是这样的:图形由三个面组成,需要定义三个形状
2023-07-05

echarts自定义legend样式的详细图文教程

在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,下面这篇文章主要给大家介绍了关于echarts自定义legend样式的相关资料,需要的朋友可以参考下
2022-11-13

Echarts中常用的参数总结及参数自定义示例代码

Echarts中参数的配置功能很强大,对任何一项的配置都很细致,下面这篇文章主要给大家介绍了关于Echarts中常用的参数总结及参数自定义的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-18

Android自定义View圆形进度条控件的方法

这篇文章主要讲解了Android自定义View圆形进度条控件的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。继续练习自定义View,这次带来的圆形进度条控件与之前的圆形百分比控件大同小异,这次涉及到了渐变渲
2023-05-31

vue+echarts绘制省份地图并添加自定义标注方式

这篇文章主要介绍了vue+echarts绘制省份地图并添加自定义标注方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-05-17

如何自定义Matplotlib库中柱形图的颜色

Matplotlib是Python中常用的数据可视化库之一,它提供了丰富的绘图功能。在绘制柱形图时,我们可以通过改变颜色来增加图表的可读性和美观性。下面将详细介绍如何使用Matplotlib库来改变柱形图的颜色,并提供具体的代码示例。在M
如何自定义Matplotlib库中柱形图的颜色
2024-01-17

C++应用程序中的自定义图形显示

在 c++++ 应用程序中创建自定义图形显示背景,需要创建自定义窗口类,创建并显示窗口,并在窗口渲染方法中执行绘图操作,具体步骤如下:创建自定义窗口类,处理窗口创建和渲染;创建自定义窗口并将其显示在屏幕上;在窗口渲染方法中进行绘图操作。C+
C++应用程序中的自定义图形显示
2024-05-10

DRUPAL6中定义hook_menu参数的方法

本文实例讲述了DRUPAL6中定义hook_menu参数的方法。分享给大家供大家参考。具体分析如下: hook_menu()函数位于 developer/hooks/core.php ,第928 行 描述:确定菜单项和页回调。这钩子,使模块
2022-06-12

Android自定义View——扇形统计图的实现代码

Android 扇形统计图 先看看效果: 看上去如果觉得还行就继续往下看吧!自定义View 定义成员变量private int mHeight, mWidth;//宽高private Paint mPaint;//扇形的画笔private
2022-06-06

Android自定义图片地图坐标功能的实现方法

本篇内容主要讲解“Android自定义图片地图坐标功能的实现方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android自定义图片地图坐标功能的实现方法”吧!一、前言最近项目要求实现一个在自
2023-06-20

win10如何自定义程序的图形性能首选项

这篇文章将为大家详细讲解有关win10如何自定义程序的图形性能首选项,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。方法1、在桌面的空白处点击鼠标右键,在弹出的菜单中点击【显示设置】。2、依次点击【显示】选
2023-06-10

自定义颜色在Matplotlib柱形图绘制中的应用

使用Matplotlib库绘制柱形图时如何自定义颜色Matplotlib是一个功能强大、灵活且易于使用的Python绘图库,可以绘制各种类型的图形,包括柱形图。默认情况下,Matplotlib会自动为柱形图生成一组不同颜色的条形,但是有时
自定义颜色在Matplotlib柱形图绘制中的应用
2024-01-17

Android 实现自定义圆形进度条的三种常用方法

这篇文章主要介绍了Android 实现自定义圆形进度条的三种常用方法的相关资料,需要的朋友可以参考下
2023-03-01

编程热搜

目录