echart 3d立体颜色渐变柱状图

如果可以实现记得点赞分享，谢谢老铁～

1.需求描述

根据业务需求将不同的法律法规，展示不同的3d立体渐变柱状图。

2.先看下效果图

在这里插入图片描述

3. 确定三面的颜色，这里我是自定义的颜色

   // 右面生成颜色const rightColorArr = ref(["#79DED1",...]);// 左面生成颜色const leftColorArr = ref(["#67C3B7", ...]);// 顶部生成颜色const topColorArr = ref(["#ADF4EB",...]);

4.然后绘画三个面对应的函数，且注册

// 绘制左侧面const CubeLeft = echarts.graphic.extendShape({});// 绘制右侧面const CubeRight = echarts.graphic.extendShape({});// 绘制顶面const CubeTop = echarts.graphic.extendShape({});// 注册三个面图形echarts.graphic.registerShape("CubeLeft", CubeLeft);echarts.graphic.registerShape("CubeRight", CubeRight);echarts.graphic.registerShape("CubeTop", CubeTop);

5.重点在renderItem 自定义渲染函数上

 series: [{type: "custom",renderItem: (params, api) => {let cubeLeftStyle: any = "";let cubeRightStyle: any = "";let cubeTopStyle: any = "";cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: leftColorArr.value[params.dataIndex],},{offset: 1,color: leftColorArr.value[params.dataIndex],},]);cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rightColorArr.value[params.dataIndex],},{offset: 1,color: rightColorArr.value[params.dataIndex],},]);cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: topColorArr.value[params.dataIndex],},{offset: 1,color: topColorArr.value[params.dataIndex],},]);const location = api.coord([api.value(0), api.value(1)]);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), -80]),},style: {fill: cubeLeftStyle,},},{type: "CubeRight",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), -80]),},style: {fill: cubeRightStyle,},},{type: "CubeTop",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), -50]),},style: {fill: cubeTopStyle,},},],};},data: valList.value,},],

5.最后看全文吧，这个是vue3 的文件

<template><div class="topCon"><div class="tagList left"><div class="item" v-for="(item, index) in nameList" :key="index"><a-tag :color="rightColorArr[index]" class="tag">TOP {{ index + 1 }}</a-tag><span>{{ item }}</span></div></div><div class="right" id="AnalysisLegalTopBar" style="height: 400px"></div></div>
</template>
<script lang="ts">
import { onMounted, toRefs, ref, watch } from "vue";
import * as echarts from "echarts";
type EChartsOption = echarts.EChartsOption;
export default {props: {data: Array,},setup(props) {const { data } = toRefs<any>(props);const myChart = ref<any>(null);let valList = ref<any>([]);let nameList = ref<any>([]);// 右面生成颜色const rightColorArr = ref(["#79DED1","#75D5AF","#7FD991","#78BF9D","#95D3C9","#84B5D3","#7794C1","#828AD0","#7573D1","#8057D1",]);// 左面生成颜色const leftColorArr = ref(["#67C3B7","#68C39F","#68C27A","#65AD8A","#7BB8AE","#76A6C3","#6789BC","#737ABE","#5A58BC","#7349C6",]);// 顶部生成颜色const topColorArr = ref(["#ADF4EB","#9BEBCC","#9DE6AB","#98DEBD","#A1E5DA","#9DC5DE","#8CACDD","#B0B5E6","#7F7DD0","#8057D1",]);// 绘制左侧面const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx: any, shape) {// 会canvas的应该都能看得懂，shape是从custom传入的const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x + 7, shape.y];const c1 = [shape.x - 23, shape.y - 6];const c2 = [xAxisPoint[0] - 23, xAxisPoint[1] - 13];const c3 = [xAxisPoint[0] + 7, 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: any, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x + 7, shape.y];const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];const c3 = [xAxisPoint[0] + 25, xAxisPoint[1] - 15];const c4 = [shape.x + 25, shape.y - 15];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: any, shape) {const c1 = [shape.x + 7, shape.y];const c2 = [shape.x + 25, shape.y - 15]; //右点const c3 = [shape.x - 5, shape.y - 20];const c4 = [shape.x - 23, shape.y - 6];ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();},});// 注册三个面图形echarts.graphic.registerShape("CubeLeft", CubeLeft);echarts.graphic.registerShape("CubeRight", CubeRight);echarts.graphic.registerShape("CubeTop", CubeTop);const getOption = () => {return {backgroundColor: "transparent",title: {// text: "单位：个",textStyle: {color: "#79DED1",fontWeight: "800",fontSize: 16,},left: "18px",top: "1%",},tooltip: {trigger: "axis",axisPointer: {type: "shadow",},formatter: function (params, ticket, callback) {const item = params[1];return item.name + " : " + item.value;},},grid: {top: "12%",bottom: "3%",left: "left",containLabel: true,},xAxis: {type: "category",show: false,data: nameList.value,axisLine: {show: true,lineStyle: {color: "#7ebaf2",},},axisTick: {show: false,length: 9,alignWithLabel: true,lineStyle: {color: "#7DFFFD",},},axisLabel: {fontSize: 12,},},yAxis: {type: "value",show: false,min: 0,axisLine: {show: true,lineStyle: {color: "#7ebaf2",},},splitLine: {show: false,},splitArea: {show: true,areaStyle: {color: ["rgba(26,50,83,1)", "rgba(30,57,92,1)"],},},axisTick: {show: false,},axisLabel: {fontSize: 12,},boundaryGap: ["20%", "20%"],},series: [{type: "custom",renderItem: (params, api) => {let cubeLeftStyle: any = "";let cubeRightStyle: any = "";let cubeTopStyle: any = "";cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: leftColorArr.value[params.dataIndex],},{offset: 1,color: leftColorArr.value[params.dataIndex],},]);cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rightColorArr.value[params.dataIndex],},{offset: 1,color: rightColorArr.value[params.dataIndex],},]);cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: topColorArr.value[params.dataIndex],},{offset: 1,color: topColorArr.value[params.dataIndex],},]);const location = api.coord([api.value(0), api.value(1)]);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), -80]),},style: {fill: cubeLeftStyle,},},{type: "CubeRight",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), -80]),},style: {fill: cubeRightStyle,},},{type: "CubeTop",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), -50]),},style: {fill: cubeTopStyle,},},],};},data: valList.value,},{type: "bar",label: {normal: {show: true,position: "top",fontSize: 16,color: "#6C6C6C",offset: [2, -25],},},itemStyle: {color: "transparent",},tooltip: {},data: valList.value,},],};};watch(() => data.value,(list) => {let option_bar: any = getOption();list.forEach((item, index) => {nameList.value.push(item.name);valList.value.push(item.value);});option_bar && myChart.value.setOption(option_bar);});onMounted(() => {// 基于准备好的dom，初始化echarts实例var chartDom: any = document.getElementById("AnalysisLegalTopBar");myChart.value = echarts.init(chartDom);window.addEventListener("resize", () => {myChart.value.resize();});});return {nameList,rightColorArr,};},
};
</script>
<style lang="less" scoped>
.topCon {display: flex;justify-content: center;align-items: center;.left {width: 30%;.item {display: flex;align-items: center;}}.right {width: 70%;}.tagList {.tag {width: 46px;height: 23px;border-radius: 4px;font-size: 10px;font-weight: 500;line-height: 20px;margin: 4px 0px;margin-right: 10px;color: #fff;background: rgba(121, 222, 209, 0.39);display: flex;justify-content: center;align-items: center;}}
}
</style>

收工！谢谢老铁们的点赞收藏~

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

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

相关文章

ComponentOne Studio ASP.NET MVC Crack

ComponentOne Studio ASP.NET MVC Crack

ComponentOne Studio ASP.NET MVC Crack FlexReport增强功能 添加了对在Microsoft Windows上部署Microsoft Azure的支持。 添加了对显示嵌入字体的支持。 .NET标准版的经典C1PDF(Beta版) GrapeCity的经典C1Pdf库现在提供了基于Microsoft.NET标准的版本。在任何.NET应用程序(包括…
阅读更多...
江南大学计算机考研分析

江南大学计算机考研分析

24计算机考研|上岸指南 江南大学 江南大学计算机考研招生学院是人工智能与计算机学院。目前均已出拟录取名单。 江南大学人工智能与计算机学院成立于2020年3月&#xff0c;办学历史可追溯到1994年设立的计算机应用专业。学院秉持江南大学“彰显轻工特色&#xff0c;服务国计民…
阅读更多...
【数据结构】栈和队列

【数据结构】栈和队列

【数据结构】栈和队列 一&#xff1a; 栈1.栈的概念及和结构2. 栈的实用3. 栈接口实现 二&#xff1a; 队列1. 队列的概念和结构2. 队列的实用3. 队列接口实现 三&#xff1a;扩展 一&#xff1a; 栈 1.栈的概念及和结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许…
阅读更多...
SAP安全库存-安全库存共享、安全库存简介

SAP安全库存-安全库存共享、安全库存简介

SAP系统中的安全库存用于管理计划外和计划内的库存需求，在某些行业中，由于不同的情况，如意外损耗、损坏、环境问题、制造工艺问题、需求增加等，通常会出现意外的库存需求。 SAP提供了维护安全库存的处理方式来处理这样的问题，安全库存的字段信息在主数据视图中，在物料需…
阅读更多...
题解 | #1002.Shortest path# 2023杭电暑期多校9

题解 | #1002.Shortest path# 2023杭电暑期多校9

1002.Shortest path 签到题 记忆化搜索 题目大意 给定一个正整数 n n n &#xff0c;可以对其进行以下操作&#xff1a; 如果 n n n 能被 3 3 3 整除&#xff0c;则可以使 n n / 3 nn/3 nn/3 ;如果 n n n 能被 2 2 2 整除&#xff0c;则可以使 n n / 2 nn/2 nn/2 …
阅读更多...
【C++】deque容器

【C++】deque容器

0.前言 1.deque构造函数 #include <iostream> using namespace std; #include <deque>//deque构造函数 void printDeque(const deque<int>& d) {for (deque<int>::const_iterator it d.begin(); it ! d.end(); it){//*it 100; //加了const就不能…
阅读更多...
go的gin和gorm框架实现切换身份的接口

go的gin和gorm框架实现切换身份的接口

使用go的gin和gorm框架实现切换身份的接口&#xff0c;接收前端发送的JSON对象&#xff0c;查询数据库并更新&#xff0c;返回前端信息 接收前端发来的JSON对象&#xff0c;包含由openid和登陆状态组成的一个string和要切换的身份码int型 后端接收后判断要切换的身份是否低于该…
阅读更多...
windows下dll文件的创建详细教程

windows下dll文件的创建详细教程

1、前言 dll文件是啥&#xff0c;就不作过多赘述了。现在直接教大家如何创建与使用dll文件。 本文基于windows系统&#xff0c;使用的编译相关工具为visual studio 2019。 2、创建dll 2.1 创建dll工程 首先打开visual studio&#xff0c;然后选择创建新项目&#xff0c;在搜…
阅读更多...
Word（1）：文章页码设置

Word（1）：文章页码设置

1.需求 在文档的封皮页不设置页码&#xff0c;在目录页页码设置为罗马数字&#xff0c;在正文使用阿拉伯数字。 2.解决方法 step1&#xff1a; 在封皮页的最后&#xff0c;点击”插入“-分隔符-分节符&#xff08;下一页&#xff09; step2&#xff1a;在目录页的最后&…
阅读更多...
【Java学习】System.Console使用

【Java学习】System.Console使用

背景 在自学《Java核心技术卷1》的过程中看到了对System.Console的介绍&#xff0c;编写下列测试代码&#xff0c; public class ConsoleTest {public static void main(String[] args) {Console cs System.console();String name cs.readLine("AccountInfo: ");…
阅读更多...
探讨uniapp的数据缓存问题

探讨uniapp的数据缓存问题

异步就是不管保没保存成功&#xff0c;程序都会继续往下执行。同步是等保存成功了&#xff0c;才会执行下面的代码。使用异步&#xff0c;性能会更好&#xff1b;而使用同步&#xff0c;数据会更安全。 1 uni.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中&#x…
阅读更多...
Python接口自动化测试之UnitTest详解

Python接口自动化测试之UnitTest详解

基本概念 UnitTest单元测试框架是受到JUnit的启发&#xff0c;与其他语言中的主流单元测试框架有着相似的风格。其支持测试自动化&#xff0c;配置共享和关机代码测试。支持将测试样例聚合到测试集中&#xff0c;并将测试与报告框架独立。 它分为四个部分test fixture、TestC…
阅读更多...
电脑提示数据错误循环冗余检查怎么办？

电脑提示数据错误循环冗余检查怎么办？

有些时候&#xff0c;我们尝试在磁盘上创建分区或清理硬盘时&#xff0c;还可能会遇到这个问题&#xff1a;数据错误循环冗余检查。这是如何导致的呢&#xff1f;我们又该如何解决这个问题呢&#xff1f;下面我们就来了解一下。 导致冗余检查错误的原因有哪些&#xff1f; 数据…
阅读更多...
应急响应-钓鱼邮件的处理思路溯源及其反制

应急响应-钓鱼邮件的处理思路溯源及其反制

0x00 钓鱼邮件的危害 1.窃取用户敏感信息&#xff0c;制作虚假网址&#xff0c;诱导用户输入敏感的账户信息后记录 2.携带病毒木马程序&#xff0c;诱导安装&#xff0c;使电脑中病毒木马等 3.挖矿病毒的传输&#xff0c;勒索病毒的传输等等 0x01 有指纹的钓鱼邮件的溯源处理…
阅读更多...
nodejs+vue+elementui社区流浪猫狗救助救援网站_4a4i2

nodejs+vue+elementui社区流浪猫狗救助救援网站_4a4i2

基于此背景&#xff0c;本研究结合管理员即时发布流浪猫狗救助救援信息与用户的需求&#xff0c;设计并实现了流浪猫狗救助救援网站。系统采用B/S架构&#xff0c;java语言作为主要开发语言&#xff0c;MySQL技术创建和管理数据库。系统主要分为管理员和用户两大功能模块。通过…
阅读更多...
网络编程555

网络编程555

上传代码 #include <stdio.h>//客户端 #include <string.h> #include <stdlib.h> #include<sys/types.h> #include<sys/socket.h> #include<arpa/inet.h> #include<head.h> #define PORT 69 #define IP "192.168.124.57"…
阅读更多...
excel填数据转json格式

excel填数据转json格式

定制化比较严重&#xff0c;按需更改 excel文件如下 代码 # -*- coding: utf-8 -*- import oss2 import shutil import sys import xlwt import xlrd import json from datetime import datetime, timedeltafile1 "C:\\Users\\cxy\\Desktop\\generate.xls" #打开表…
阅读更多...
MySQL8的下载与安装-MySQL8知识详解

MySQL8的下载与安装-MySQL8知识详解

本文的内容是mysql8的下载与安装。主要讲的是两点&#xff1a;从官方网站下载MySQL8安装和从集成环境安装MySQL8。 一、从官方网站下载MySQL8.0安装 MySQL8.0官方下载地址是&#xff1a;&#xff08;见图&#xff09; 官方正式版的最新版本是8.0.34&#xff0c;也推出了创新版…
阅读更多...
Kafka第三课

Kafka第三课

Flume 由三部分 Source Channel Sink 可以通过配置拦截器和Channel选择器,来实现对数据的分流, 可以通过对channel的2个存储容量的的设置,来实现对流速的控制 Kafka 同样由三大部分组成 生产者 服务器 消费者 生产者负责发送数据给服务器 服务器存储数据 消费者通过从服务器取…
阅读更多...
【C++11保姆级教程】auto和decltype

【C++11保姆级教程】auto和decltype

文章目录 前言总结一、auto1.初识auto关键字 2.auto使用二、decltype1.初识decltype2.使用decltype 总结 前言 在C11中引入了一些新的关键字和特性&#xff0c;其中包括auto和decltype。这两个关键字提供了更方便、更灵活的类型推断机制&#xff0c;使得代码编写更加简洁和可读…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023