当前位置: 首页 > news >正文

echarts3d柱状图

//画立方体三个面
const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 9.5, //柱状图宽zWidth: 4, //阴影折角宽zHeight: 3, //阴影折角高},buildPath: function (ctx, shape) {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];const p4 = [shape.x + shape.width / 2, shape.y];ctx.moveTo(p0[0], p0[1]);// ctx.lineTo(p1[0], p1[1]);ctx.lineTo(p2[0], p2[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p4[0], p4[1]);ctx.closePath();},
});
const CubeRight = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 9,zWidth: 9.5,zHeight: 5.5,},buildPath: function (ctx, shape) {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];const p4 = [shape.x + shape.width / 2, shape.y];const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];const p6 = [shape.x + shape.width / 2 + shape.zWidth,shape.y - shape.zHeight / 2,];const p7 = [shape.x - shape.width / 2 + shape.zWidth,shape.y - shape.zHeight,];ctx.moveTo(p4[0], p4[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p5[0], p5[1]);ctx.lineTo(p6[0], p6[1]);ctx.lineTo(p4[0], p4[1]);// ctx.moveTo(p4[0], p4[1]);// ctx.lineTo(p6[0], p6[1]);// ctx.lineTo(p7[0], p7[1]);// ctx.lineTo(p1[0], p1[1]);// ctx.lineTo(p4[0], p4[1]);ctx.closePath();},
});
const CubeTop = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 9,zWidth: 9.5,zHeight: 6,},buildPath: function (ctx, shape) {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];const p4 = [shape.x + shape.width / 2, shape.y];const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];const p6 = [shape.x + shape.width / 2 + shape.zWidth,shape.y - shape.zHeight / 2,];const p7 = [shape.x - shape.width / 2 + shape.zWidth,shape.y - shape.zHeight,];// ctx.moveTo(p4[0], p4[1]);// ctx.lineTo(p3[0], p3[1]);// ctx.lineTo(p5[0], p5[1]);// ctx.lineTo(p6[0], p6[1]);// ctx.lineTo(p4[0], p4[1]);ctx.moveTo(p4[0], p4[1]);ctx.lineTo(p6[0], p6[1]);ctx.lineTo(p7[0], p7[1]);ctx.lineTo(p1[0], p1[1]);ctx.closePath();},
});
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
//定义颜色值
const colors = [[{ offset: 0, color: "rgb(254, 223, 34)" },{ offset: 0.5, color: "rgba(254, 223, 34,0.2)" },{ offset: 1, color: "rgba(0, 0, 0,0.3)" },],[{ offset: 0, color: "rgba(23, 252, 238)" },{ offset: 0.5, color: "rgba(23, 252, 238,0.2)" },{ offset: 1, color: "rgba(0, 0, 0,0.3)" },],
];
const leftColors = [[{ offset: 0, color: "rgb(254, 223, 34,0.7)" },{ offset: 0.5, color: "rgba(254, 223, 34,0.9)" },{ offset: 1, color: "rgba(0, 0, 0,0.3)" },],[{ offset: 0, color: "rgba(23, 252, 238,0.7)" },{ offset: 0.5, color: "rgba(23, 252, 238,0.9)" },{ offset: 1, color: "rgba(0, 0, 0,0.3)" },],
];
const topColors = [[{offset: 0,color: "rgba(204, 186, 49,0.5)",},{offset: 1,color: "rgba(204, 186, 49,0.8)",},],[{offset: 0,color: "rgba(17, 159, 174,0.5)",},{offset: 1,color: "rgba(17, 159, 174,0.8)",},],
];
function getSeriesData() {const data = [];seriesData.forEach((item, index) => {data.push({type: "custom",name: item.label,renderItem: function (params, api) {return getRenderItem(params, api);},// label:{//  show:true,// },data: item.data,itemStyle: {color: () => {return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);},},});});data.push({type: "bar",itemStyle: {color: "transparent",},label: {normal: {show: true,position: "top",fontSize: 12,color: "rgba(255, 255, 255, 0.9)",offset: [-5, -15],},},data: seriesData[0].data,},{type: "bar",itemStyle: {color: "transparent",},//  showBackground: true,label: {normal: {show: true,position: "top",fontSize: 12,color: "rgba(255, 255, 255, 0.9)",offset: [-7, -15],},},data: seriesData[1].data,});return data;
}function getRenderItem(params, api) {const index = params.seriesIndex;let location = api.coord([api.value(0) + index, api.value(1)]);const shape = {api,xValue: api.value(0) + index,yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),};return {type: "group",children: [{position: seriesData[index].position,type: "CubeTop",shape: shape,style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,topColors[index]),},},{position: seriesData[index].position,type: "CubeLeft",shape: shape,style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,leftColors[index]),},},{position: seriesData[index].position,type: "CubeRight",shape: shape,style: api.style(),},],};
}const seriesData = [{label: "话务",position: [-20, 0],data: [386, 247, 298, 476],},{label: "工单",position: [-60, 0],data: [200, 374, 154, 200],},
];let option = reactive({tooltip: {show: false,},xAxis: {data: ["投诉", "咨询", "建议", "保修"],axisTick: {show: false,},axisLine: {lineStyle: {color: "#0b3b67",width: 3,},},axisLabel: {show: true,color: "#fff",},},yAxis: {show: true,axisLabel: {show: false,},splitNumber: 7,splitLine: {show: true,lineStyle: {color: "#0b3b67",},},},series: getSeriesData(),
});

 

相关文章:

echarts3d柱状图

//画立方体三个面 const CubeLeft echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 9.5, //柱状图宽zWidth: 4, //阴影折角宽zHeight: 3, //阴影折角高},buildPath: function (ctx, shape) {const api shape.api;const xAxisPoint api.coord([shape.xValue, 0]);con…...

使用webpack插件webpack-dev-server 出现Cannot GET/的解决办法

问题描述 文档地址深入浅出webpack 使用 DevServer运行webpack,跑起来之后提示Cannot GET/: 解决方案: 查阅官方文档 根据目录结构修改对应的配置: 然后就可以成功访问:...

老网工必备好物,分享15个网络监控神器

下午好,我的网工朋友。 近年来,随着虚拟、云和边缘网络的增加,网络监控工具已经显得越来越重要。 在当今大多数企业中,监控混合IT环境中的网络流量对于主动网络管理至关重要。 无论是检测行为异常、占用带宽、应对新威胁&#…...

拒绝摆烂!C语言练习打卡第一天

🔥博客主页:小王又困了 📚系列专栏:每日一练 🌟人之为学,不日近则日退 ❤️感谢大家点赞👍收藏⭐评论✍️ 🗒️前言: 在前面我们学习完C语言的所以知识,当…...

Spring 使用注解开发、代理模式、AOP

使用注解开发 在Spring4之后&#xff0c;要使用注解开发&#xff0c;必须要保证AOP的包导入了 项目搭建&#xff1a; 在配置文件中导入约束&#xff0c;增加注解支持 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.spri…...

考公-判断推理-逻辑判断-翻译推理

第十节 前推后 例题 例题 例题 例题 例题 翻译规则之后推前 不 不能落下 谁必不可少&#xff0c;谁房箭头后面 例题 例题 例题 现实生活中觉得对&#xff0c;题干推不出 例题 例题...

关于MPU6050的VLOGIC引脚作用

关键字&#xff1a;MPU6X0X、 MPU6050、数字逻辑电平、VLOGIC 框图&#xff1a; 一、VLOGIC引脚作用? VLOGIC引脚主要用于设置为I2C供电引脚&#xff0c;以保证正确的I2C通信。 The bias and LDO section generates the internal supply and the reference voltages and cu…...

对约瑟夫问题的进一步思考

约瑟夫问题重述&#xff1a; 在计算机编程的算法中&#xff0c;类似问题又称为约瑟夫环 约瑟夫环&#xff1a;N个人围成一圈&#xff0c;从第一个开始报数&#xff0c;第M个将被杀掉&#xff0c;最后剩下一个&#xff0c;其余人都将被杀掉。 例如N6&#xff0c;M5&#xff0…...

程序员如何优雅的提升软件开发效率?

一、前言 面对日益发达的&#xff0c;极具诱惑力的夜生活&#xff0c;很少有人能置身事外。 但是有那么一群人&#xff0c;即使黑幕高垂还坚守在工作之位&#xff0c;无视夜晚的繁荣和喧嚣。 是的&#xff0c;他们就是程序员&#xff0c;一群成天编写代码的程序员。 相信&#…...

宽屏企业网站介绍

宽屏企业网站是一种以宽屏设计为特点的网站&#xff0c;旨在提供更丰富、精美的网页展示效果&#xff0c;适合于展示企业的品牌形象、产品介绍和服务内容。该类网站常用于企业展示、商务推广、企业形象塑造等场景。 宽屏企业网站的内容介绍一般包括以下几个方面&#xff1a; 公…...

OPENCV C++(八)HOG的实现

hog适合做行人的识别和车辆识别 对一定区域的形状描述方法 可以表示较大的形状 把图像分成一个一个小的区域的直方图 用cell做单位做直方图 计算各个像素的梯度强度和方向 用3*3的像素组成一个cell 3*3的cell组成一个block来归一化 提高亮度不变性 常用SVM分类器一起使用…...

干货分享:制作婚礼请柬的技巧,从零基础起步

在现代社会&#xff0c;婚礼请柬已经成为了婚礼必备的一部分。而如何制作一个个性化的婚礼请柬呢&#xff1f;今天&#xff0c;我们将分享一个简便而可靠的制作方法&#xff0c;那就是使用乔拓云平台。 乔拓云平台是一个可靠的第三方制作工具&#xff0c;提供了丰富的H5模板&am…...

c语言每日一练(6)

前言&#xff1a;每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;暑假时三天之内必有一更&#xff0c;到了开学之后&#xff0c;将看学业情…...

2023年国赛数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…...

WebAPIs 第四天

1.日期对象 2.节点操作 3.M端事件 4.JS插件 一.日期对象 实例化时间对象方法时间戳 日期对象&#xff1a;用来表示时间的对象 作用&#xff1a;可以得到当前系统时间 1.1 实例化 ① 概念&#xff1a;在代码中发现了new关键字时&#xff0c;一般将这个操作称为实例化 …...

SQL 语句解析过程详解

SQL 语句解析过程详解&#xff1a; 1&#xff0e;输入SQL语句 2&#xff0e;词法分析------flex 使用词法分析器&#xff08;由Flex生成&#xff09;将 SQL 语句分解为一个个单词&#xff0c;这些单词被称为“标记“。标记包括关键字、标识符、运算符、分隔符等。 2.1 flex 原…...

单源最短路径【学习算法】

单源最短路径【学习算法】 前言版权推荐单源最短路径Java算法实现代码结果 带限制的单源最短路径1928. 规定时间内到达终点的最小花费LCP 35. 电动车游城市 最后 前言 2023-8-14 18:21:41 以下内容源自《【学习算法】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此…...

汽车上的电源模式详解

① 一般根据钥匙孔开关的位置来确定整车用电类别&#xff0c;汽车上电源可以分为常电&#xff0c;IG电&#xff0c;ACC电 1&#xff09;常电。常电表示蓄电池和发电机输出直接供电&#xff0c;即使点火开关在OFF档时&#xff0c;也有电量供应。一般来讲模块的记忆电源及需要在车…...

【碎碎念随笔】1、回顾我的电脑和编程经历

✏️ 闲着无事&#xff0c;讲述一下我的计算机和代码故事 一、初识计算机 &#x1f5a5;️ 余家贫&#xff0c;耕植无钱买电脑。大约六年级暑假&#xff0c;我在姐姐哪儿第一次接触到了计算机&#xff08;姐姐也是买的二手&#xff09;。 &#x1f5a5;️ 计算机真有趣&#x…...

背上花里胡哨的书包准备面试之webpack篇(+一些常问的面试题)

目录 webpack理解&#xff1f; webpack构建流程&#xff1f; loader解决什么问题&#xff1f; plugin解决什么问题&#xff1f; 编写loader和plugin的思路&#xff1f; webpack热更新&#xff1f; 如何提高webpack的构建速度&#xff1f; 问git常用命令&#xff1f; ht…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...