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(),
});

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

陪诊小程序开发|陪诊陪护小程序让看病不再难

陪诊小程序通过与医疗机构的合作,整合了医疗资源,让用户能够更加方便地获得专业医疗服务。用户不再需要面对繁琐的挂号排队,只需通过小程序预约服务,便能够享受到合适的医疗资源。这使得用户的就医过程变得简单高效,并…

【EI/SCOPUS检索】第三届计算机视觉、应用与算法国际学术会议(CVAA 2023)

第三届计算机视觉、应用与算法国际学术会议(CVAA 2023) The 3rd International Conference on Computer Vision, Application and Algorithm 2023年第三届计算机视觉、应用与算法国际学术会议(CVAA 2023)主要围绕计算机视觉、计算机应用、计…

PPT颜色又丑又乱怎么办?

一、设计一套PPT时,可以从这5个方面进行设计 二、PPT颜色 (一)、PPT常用颜色分类 一个ppt需要主色、辅助色、字体色、背景色即可。 (二)、搭建PPT色彩系统 设计ppt时,根据如下几个步骤,依次选…

Arduino驱动红外二氧化碳传感器(气体传感器篇)

目录 1、传感器特性 2、驱动程序 红外激光传感器是将成熟的红外吸收气体检测技术与精密光路设计、精良电路设计紧密结合而制作出的高性能传感器,具有高灵敏度、高分辨率、低功耗,响应快、抗水汽干扰、不中毒、稳定性高、使用寿命长等特点。本篇博文使用Arduino驱动红外二氧…

Android学习之路(2) 设置视图

一、设置视图宽高 ​ 在Android开发中,可以使用LayoutParams类来设置视图(View)的宽度和高度。LayoutParams是一个用于布局的参数类,用于指定视图在父容器中的位置和大小。 ​ 下面是设置视图宽度和高度的示例代码: …

Win10基于 Anaconda 配置 Deeplabcut 环境

最近需要做动物行为学分析的相关研究,同时由于合作者只有 Windows 系统,于是只好在 Windows 中配置环境。说实话还真的是挺折磨的。。。 一、下载 Anaconda 可以通过清华源下载 Anaconda:https://mirrors.tuna.tsinghua.edu.cn/anaconda/ar…

奥威BI数据可视化工具:报表就是平台,随时自助分析

别的数据可视化工具,报表就只是报表,而奥威BI数据可视化工具,一张报表就约等于一个平台,可随时展开多维动态自助分析,按需分析,立得数据信息。 奥威BI是一款多维立体分析数据的数据可视化工具。它可以帮助…

电脑xinput1_3.dll丢失的解决方法?哪个解决方法更简单

最近在打开软件或者游戏的时候,电脑提示xinput1_3.dll文件丢失的错误。这个问题导致我无法运行某些游戏和应用程序。通过一番尝试和研究,我找到了一些修复xinput1_3.dll文件丢失的方法,并在此分享给大家。 首先,我了解到xinput1_3…

NSI45030AT1G LED驱动器方案为汽车外部及内部照明恒流稳流器(CCR)方案

关于线性恒流调节器(CCR):是一种用于控制电流的稳定输出。它通常由一个功率晶体管和一个参考电流源组成。CCR的工作原理是通过不断调节功率晶体管的导通时间来维持输出电流的恒定。当输出电流超过设定值时,CCR会减少功率晶体管的导…

红日ATT&CK VulnStack靶场(三)

网络拓扑 web阶段 1.扫描DMZ机器端口 2.进行ssh和3306爆破无果后访问web服务 3.已知目标是Joomla,扫描目录 4.有用的目录分别为1.php 5.configuration.php~中泄露了数据库密码 6.administrator为后台登录地址 7.直接连接mysql 8.找到管理员表,密码加密了…

提高学生学习效率的模拟考试系统

在如今竞争激烈的社会环境下,提高学生的学习效率显得尤为重要。为了帮助学生评估自己的学习水平并提供有针对性的学习建议,开发一款模拟考试系统是非常必要的。 一、学生信息录入 模拟考试系统首先需要学生信息录入功能。学生可以通过一个简单的表单填…

Unity游戏源码分享-中国象棋Unity5.6版本

Unity游戏源码分享-中国象棋Unity5.6版本 项目地址: https://download.csdn.net/download/Highning0007/88215699

【c语言】指针进阶(超详细)

文章目录 ✈ 指向函数指针数组的指针📌指向函数指针数组的指针的定义📌指向函数指针数组的数组指针的使用 ✈回调函数📌 回调函数的定义📌 回调函数的使用 ✈qsort函数📌 qsort函数的作用📌qsort函数的定义…

【佳佳怪文献分享】安全人机交互的学习责任分配与自动驾驶应用

标题:Learning Responsibility Allocations for Safe Human-Robot Interaction with Applications to Autonomous Driving 作者:Ryan K. Cosner, Yuxiao Chen, Karen Leung, and Marco Pavone 来源:2023 IEEE International Conference on …

【QT】 Word模板编辑、转PDF格式

很高兴在雪易的CSDN遇见你 ,给你糖糖 欢迎大家加入雪易社区-CSDN社区云 前言 本文分享基于QT进行Word模板编辑以及Word转PDF的技术,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 目录 …

机器学习-特征选择:如何使用递归特征消除算法自动筛选出最优特征?

一、引言 在实际应用中,特征选择作为机器学习和数据挖掘领域的重要环节,对于提高模型性能和减少计算开销具有关键影响。特征选择是从原始特征集中选择最相关和最具区分力的特征子集,以提高模型的泛化能力和可解释性。 特征选择在实践中具有以…

计算机竞赛 python opencv 深度学习 指纹识别算法实现

1 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 python opencv 深度学习 指纹识别算法实现 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数:3分工作量:4分创新点:4分 该项目较为新颖…

代码质量检查工具SonarQube

Devops流水线之SonarQube 文章目录 Devops流水线之SonarQube1. 软件功能介绍及用途2. 软件环境搭建与使用2.1 使用方法2.2 SonarQube相关属性说明2.3 Sonar配置文件内容说明 3. 使用环节4. 检查方法 1. 软件功能介绍及用途 SonarQube是一个用于代码质量管理的开源平台&#xf…

Python Opencv实践 - 图像放射变换

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) rows,cols img.shape[:2] print(img.shape[:2])#使用getAffineTransform来获得仿射变换的矩阵M #cv.getAffineTransform(…

Java:正则表达式案例:爬数据,重复数据替换,数据分割

使用正则表达式查找一段文本中的内容 需求:请把下面文本中的电话,邮箱,座机号码,热线都爬取出来。 String data "电话:1866668888,18699997777\n" "或者联系邮箱: boniuitcast.cn,\n" "座机…