echarts使用自定义图形实现3D柱状图

先看下效果吧

custom3dBar

实现思路

  1. 使用graphic创建并注册自定义图形。根据每组的数据值,得到一个对应的点,从点出发用canvas绘制一组图形,分别为
    顶部的菱形
    top
    const CubeTop = echarts.graphic.extendShape({
      buildPath: function (ctx, shape) {
         const c1 = [shape.x, shape.y]; // 下
         const c2 = [shape.x + 9, shape.y - 7]; // 右
         const c3 = [shape.x, shape.y - 12]; // 上
         const c4 = [shape.x - 9, shape.y - 7]; // 左
         ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
      }
    });
    
    左侧的四边形 left
    const CubeLeft = echarts.graphic.extendShape({
       buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y]; // 右上
          const c1 = [shape.x - 9, shape.y - 7]; //左上
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 6]; // 左下
          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();
       }
    });
    
    右侧的四边形
    right
    const CubeRight = echarts.graphic.extendShape({
       buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y]; // 左上
          const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左下
          const c3 = [xAxisPoint[0] + 9, xAxisPoint[1] - 7]; //右下
          const c4 = [shape.x + 9, shape.y - 7]; // 右上
          ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
      }
    });
    
  2. 用series自定义系列(custom)的renderItem将这一组图形元素返回,组合形成3D柱状图

代码实现

<template>
    <div id="graphicBar"></div>
</template>

<script setup>
    import {reactive, onMounted} from 'vue'
    import * as echarts from "echarts";
    const barData = reactive({
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: [200, 180, 120, 220, 80, 160, 150]
    })
    const customShape = () => {
        // 创建自定义的shape类型
        const CubeLeft = echarts.graphic.extendShape({
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint;
                const c0 = [shape.x, shape.y]; // 右上
                const c1 = [shape.x - 9, shape.y - 7]; //左上
                const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 6]; // 左下
                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({
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint;
                const c1 = [shape.x, shape.y]; // 左上
                const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左下
                const c3 = [xAxisPoint[0] + 9, xAxisPoint[1] - 7]; //右下
                const c4 = [shape.x + 9, shape.y - 7]; // 右上
                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({
            buildPath: function (ctx, shape) {
                const c1 = [shape.x, shape.y]; // 下
                const c2 = [shape.x + 9, shape.y - 7]; // 右
                const c3 = [shape.x, shape.y - 12]; // 上
                const c4 = [shape.x - 9, shape.y - 7]; // 左
                ctx
                    .moveTo(c1[0], c1[1])
                    .lineTo(c2[0], c2[1])
                    .lineTo(c3[0], c3[1])
                    .lineTo(c4[0], c4[1])
                    .closePath();
            }
        });
        // 注册创建的自定义的shape类型
        echarts.graphic.registerShape('CubeLeft', CubeLeft);
        echarts.graphic.registerShape('CubeRight', CubeRight);
        echarts.graphic.registerShape('CubeTop', CubeTop);
    }
    const draw_bar = () => {
        customShape()
        const option = {
            xAxis: {
                data: barData.xAxis,
                axisLabel: {
                    fontSize: 12,
                    color: '#FFFFFF'
                },
                axisLine: {
                    lineStyle: {
                        color: '#3A4547',
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    fontSize: 12,
                    color: '#A8B5C1'
                },
                splitLine: {
                    lineStyle: {
                        color: ['#303638'],
                        type: 'dashed'
                    }
                }
            },
            grid: {
                containLabel: true,
                top: 10,
                bottom: 0,
                right: 0,
                left: 0
            },
            series: [        
                {
                    type: 'custom',
                    renderItem: (params, api) => {
                        // coord 将数据值映射到坐标系上
                        // api.value 给定维度的数据值
                        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: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: 'rgba(35, 153, 254, 1)'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(70, 207, 255, 1)'
                                            },
                                        ])
                                    }
                                },
                                {
                                    type: 'CubeRight',
                                    shape: {
                                        api,
                                        x: location[0], // 中间上的x
                                        y: location[1], // 中间上的y
                                        xAxisPoint: api.coord([api.value(0), 0]) // 中间下
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: 'rgba(32, 147, 255, 1)'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(71, 237, 255, 1)'
                                            },
                                        ])
                                    }
                                },
                                {
                                    type: 'CubeTop',
                                    shape: {
                                        api,
                                        x: location[0],
                                        y: location[1],
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: 'rgba(107, 230, 254, 1)'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(48, 211, 255, 1)'
                                            }
                                        ])
                                    }
                                }
                            ]
                        };
                    },
                    data: barData.data
                }
            ]
        };
        return option
    }
    const chart_init = () => {
        let curChart = echarts.init(document.getElementById('graphicBar'))
        const exampleOption = draw_bar()
        curChart.setOption(exampleOption);
    }
    onMounted(() => {
        chart_init()
    })
</script>

<style scoped>
    #graphicBar{
        width: 460px;
        height: 300px;
    }
</style>

补充说明

  1. 以上内容是vite构建的vue3项目
  2. echarts版本5.5.1

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/790672.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

odoo视图继承

odoo视图继承 在模型时候&#xff0c;不对视图、菜单等进行修改&#xff0c;原视图和菜单等视图数据仍然可以使用&#xff0c;不需要重新构建 form视图继承案例 model&#xff1a;为对应模型 inherit_id&#xff1a;为继承的视图&#xff0c;ref:为继承视图的id&#xff0…

学圣学最终的目的是:达到思无邪的状态( 纯粹、思想纯正、积极向上 )

学圣学最终的目的是&#xff1a;达到思无邪的状态&#xff08; 纯粹、思想纯正、积极向上 &#xff09; 中华民族&#xff0c;一直以来&#xff0c;教学都是以追随圣学为目标&#xff0c;所以中华文化也叫圣学文化&#xff0c;是最高深的上等学问&#xff1b; 圣人那颗心根本…

linux创建定时任务

crontab方式 先查看是否有cron systemctl status crond 没有的话就安装 yum install cronie 打开你的crontab文件进行编辑。使用以下命令打开当前用户的crontab文件&#xff1a; crontab -e * * * * * /export/test.sh >> /export/test.log 2>&1/export/test.s…

大语言模型里的微调vs RAG vs 模板提示词

文章目录 介绍微调&#xff08;Fine-tuning&#xff09;定义优点&#xff1a;缺点&#xff1a;应用场景&#xff1a;技术细节 检索增强生成&#xff08;RAG&#xff0c;Retrieval-Augmented Generation&#xff09;定义优点&#xff1a;缺点&#xff1a;应用场景&#xff1a;技…

嵌入式应用开发之代码整洁之道

前言&#xff1a;本系列教程旨在如何将自己的代码写的整洁&#xff0c;同时也希望小伙伴们懂如何把代码写脏&#xff0c;以备不时之需&#xff0c;同时本系列参考 正点原子 &#xff0c; C代码整洁之道&#xff0c;编写可读的代码艺术。 #好的代码的特点 好的代码应该都有着几…

联想拯救者Y7000 IRX9 笔记本接口功能介绍

适用机型&#xff1a;Legion Y7000 IRX9; 83JJ&#xff1b; USB&#xff08;3.2 Gen 1&#xff09;Type-接口摄像头开关组合音频插孔 多用于USB Type-C接口 以太网接口 多用途USB Type-C接口&#xff08;支持USB Power Delivery&#xff09;HDMI接口USB&#xff08;3.2 Gen 1&…

勇攀新高峰|暴雨信息召开2024年中述职工作会议

7月8日至9日&#xff0c;暴雨信息召开2024年中述职工作会议&#xff0c;总结回顾了上半年的成绩和不足&#xff0c;本次会议采用线上线下的方式举行&#xff0c;公司各部门管理人员、前台市场营销人员参加述职&#xff0c;公司领导班子出席会议。 本次述职采取了现场汇报点评的…

[CTF]-PWN:House of Cat堆题型综合解析

原理&#xff1a; 调用顺序&#xff1a; exit->_IO_wfile_jumps->_IO_wfile_seekoff->_IO_switch_to_wget_mode _IO_wfile_seekoff源码&#xff1a; off64_t _IO_wfile_seekoff (FILE *fp, off64_t offset, int dir, int mode) {off64_t result;off64_t delta, new…

[论文笔记]RAPTOR: RECURSIVE ABSTRACTIVE PROCESSING FOR TREE-ORGANIZED RETRIEVAL

引言 今天带来又一篇RAG论文笔记&#xff1a;RAPTOR: RECURSIVE ABSTRACTIVE PROCESSING FOR TREE-ORGANIZED RETRIEVAL。 检索增强语言模型能够更好地适应世界状态的变化并融入长尾知识。然而&#xff0c;大多数现有方法只能从检索语料库中检索到短的连续文本片段&#xff0…

引用计数器(kref)

1、什么是引用计数器 如果我们写了一个字符驱动&#xff0c;当硬件设备插上时&#xff0c;系统会生成一个设备节点。用户在应用空间操作这个设备节点就可以操作设备。如果此时将硬件断开&#xff0c;驱动是不是就要立刻释放呢&#xff1f;如果立刻释放&#xff0c;应用程序是不…

【Spring成神之路】老兄,来一杯Spring AOP源码吗?

文章目录 一、引言二、Spring AOP的使用三、Spring AOP的组件3.1 Pointcut源码3.2 Advice源码3.3 Advisor源码3.4 Aspect源码 四、Spring AOP源码刨析4.1 configureAutoProxyCreator源码解析4.2 parsePointcut源码解析4.3 parseAdvisor源码解析4.4 parseAspect源码解析4.5 小总…

HDFS 块重构和RedundancyMonitor详解

文章目录 1. 前言2 故障块的重构(Reconstruct)2.1 故障块的状态定义和各个状态的统计信息2.2 故障文件块的查找收集2.5.2.1 misReplica的检测2.5.2.2 延迟队列(postponedMisreplicatedBlocks)的构造和实现postponedMisreplicatedBlocks中Block的添加postponedMisreplicatedBloc…

补码一位乘法原理(布斯编码详讲)

最近在看补码乘法的时候&#xff0c;感觉到很奇怪的一点&#xff0c;那就是补码的一位乘法&#xff0c;就是上网查了大量的资料都没有理解到它真正的原理&#xff0c;总感觉还是不会。那么&#xff0c;补码乘法的原理到底是什么呢&#xff1f;而让我们一直困惑的点是哪里呢&…

零基础做项目---五子棋对战---day02

用户模块 完成注册登录&#xff0c;以及用户分数管理~使用数据库来保存上述用户信息. 使用 MyBatis来连接并操作数据库了 主要步骤: 1.修改 Spring的配置文件,使数据库可以被连接上. 2.创建实体类&#xff0c;用户, User 3.创建Mapper接口~ 4.实现MyBatis 的相关xml配置…

微软代码签名证书的申请流程包含哪几个关键步骤?

在软件开发环境中&#xff0c;确保软件的安全性和可信度至关重要。沃通CA提供的代码签名证书作为一种重要的安全措施&#xff0c;可以帮助开发者验证其软件的来源和完整性&#xff0c;有效地避免用户因安全顾虑而避免安装或使用软件。本文将详细介绍如何申请沃通CA代码签名证书…

类与对象-继承-同名成员处理

同名成员处理 #include<iostream> using namespace std;//继承中同名成员处理方式class Base { public:Base(){m_A 100;}void func(){cout << "Base - func()调用" << endl;}void func(int a){cout << "Base - func(int a)调用"…

AI编程工具:豆包 MarsCode 实测

MarsCode 官网&#xff1a;https://docs.marscode.cn/introduction 要提一嘴的是&#xff0c;区别其他 AI 编程助手&#xff0c;豆包 MarsCode 除了提供智能编程助手之外&#xff0c;还提供了一个 AI 原生的云端继承开发环境&#xff08;IDE&#xff09;。 实测下来&#xff…

GOLLIE : ANNOTATION GUIDELINES IMPROVE ZERO-SHOT INFORMATION-EXTRACTION

文章目录 题目摘要引言方法实验消融 题目 Gollie&#xff1a;注释指南改进零样本信息提取 论文地址&#xff1a;https://arxiv.org/abs/2310.03668 摘要 大型语言模型 (LLM) 与指令调优相结合&#xff0c;在泛化到未见过的任务时取得了重大进展。然而&#xff0c;它们在信息提…

高考后暑假新选择:从AI聊天机器人开发入门IT领域

你好&#xff0c;我是三桥君 七月来临&#xff0c;各省高考分数已揭榜完成。而高考的完结并不意味着学习的结束&#xff0c;而是新旅程的开始。对于有志于踏入IT领域的高考少年们&#xff0c;这个假期是开启探索IT世界的绝佳时机。 不知道这些有志于踏入IT领域的高考少年们&…

53-5 内网代理7 - CS上线不出网主机

靶场搭建: 这里就用之前内网代理的靶场,把web服务器这台虚拟机关闭掉,用剩下的3台加kali 各个虚拟机的网络情况 kali - 可以连接外网win2008(之前的FTP服务器) 可以连接外网 win 7(之前的办公电脑) 不出网主机 - 无法连接外网win2012 克隆机(之前的域控) - 无法连接…