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.pswp.cn/news/38329.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/38329.shtml
英文地址，請注明出處：http://en.pswp.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應用程序(包括…
閱讀更多...
每日一學——IP尋址

每日一學——IP尋址

IP尋址是指在網絡中分配和識別設備的唯一IP地址。IP地址是由一串數字組成的標識符&#xff0c;用于在網絡中定位和識別設備。 IPv4是最常用的IP地址版本&#xff0c;它由32位的地址組成&#xff0c;通常表示為四個以點分隔的十進制數字&#xff08;例如192.168.0.1&#xff09…
閱讀更多...
江南大學計算機考研分析

江南大學計算機考研分析

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…
閱讀更多...
html中文件上傳儲存到本地路徑

html中文件上傳儲存到本地路徑

第一步:寫html文件 <form action"/uplode" method"post" enctype"multipart/form-data">姓名:<input type"text" name"username"><br>年齡:<input type"text" name"age"><…
閱讀更多...
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技術創建和管理數據庫。系統主要分為管理員和用戶兩大功能模塊。通過…
閱讀更多...
vue 控件的四個角設置 父視圖position:relative

vue 控件的四個角設置 父視圖position:relative

父視圖relative&#xff0c;子視圖 absolute <div class"bg1"> <i class"topL"></i> <i class"topR"></i> <i class"bottomL"></i> <i class"bottomR"></i> <di…
閱讀更多...
網絡編程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"…
閱讀更多...
python之列表推導式

python之列表推導式

列表推導式是一種簡潔的方式來創建列表。它允許您通過在單個表達式中定義循環和條件邏輯&#xff0c;以一種更緊湊的方式生成新的列表。使用列表推導式可以使代碼更簡潔&#xff0c;易于閱讀&#xff0c;并且通常比傳統的迭代方法更快。 列表推導式的一般語法形式為&#xff1a…
閱讀更多...
最新文章

Copyright @ 2022~2023