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.hqwc.cn/news/73532.html

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

相关文章

java forEach中不能使用break和continue的原因

java forEach中不能使用break和continue的原因

1.首先了解break和continue的使用范围和作用 1.1使用范围 break适用范围&#xff1a;只能用于switch或者是循环语句中。当然可以用于增强for循环。 continue适用范围: 用于循环语句中。 1.2作用 break: 1. break用于switch语句的作用是结束一个switch语句。 2. break用于循…
阅读更多...
Apache Dubbo 云原生可观测性的探索与实践

Apache Dubbo 云原生可观测性的探索与实践

作者&#xff1a;宋小生 - 平安壹钱包中间件资深工程师 Dubbo3 可观测能力速览 Apache Dubbo3 在云原生可观测性方面完成重磅升级&#xff0c;使用 Dubbo3 最新版本&#xff0c;你只需要引入 dubbo-spring-boot-observability-starter 依赖&#xff0c;微服务集群即原生具备以…
阅读更多...
Uniapp连接蓝牙设备

Uniapp连接蓝牙设备

一、效果图 二、流程图 三、实现 UI <uni-list><uni-list :border="true"><!-- 显示圆形头像 -->
阅读更多...
【Java 动态数据统计图】动态数据统计思路案例（动态，排序，数组）四（116）

【Java 动态数据统计图】动态数据统计思路案例（动态，排序，数组）四（116）

需求&#xff1a;&#xff1a;前端根据后端的返回数据&#xff1a;画统计图&#xff1b; 1.动态获取地域数据以及数据中的平均值&#xff0c;按照平均值降序排序&#xff1b; 说明&#xff1a; X轴是动态的&#xff0c;有对应区域数据则展示&#xff1b; X轴 区域数据降序排序…
阅读更多...
【Unity小技巧】Unity探究自制对象池和官方内置对象池（ObjectPool）的使用

【Unity小技巧】Unity探究自制对象池和官方内置对象池（ObjectPool）的使用

文章目录 前言不使用对象池使用官方内置对象池应用 自制对象池总结源码参考完结 前言 对象池&#xff08;Object Pool&#xff09;是一种软件设计模式&#xff0c;用于管理和重用已创建的对象。在对象池中&#xff0c;一组预先创建的对象被维护在一个池中&#xff0c;并在需要时…
阅读更多...
使用句子嵌入的无监督文本摘要

使用句子嵌入的无监督文本摘要

一、说明 这是一个AI研究生班的作业练习&#xff0c; 在本文中&#xff0c;我将描述我用来在 Python 中执行文本摘要的方法&#xff0c;这是我在导师分配给我的很棒的任务列表之一。 二、什么是文本摘要&#xff1f; 文本摘要是从一个或多个源中提取最重要的信息以生成特定用户…
阅读更多...
QT的mysql(数据库)最佳实践和常见问题解答

QT的mysql(数据库)最佳实践和常见问题解答

涉及到数据库&#xff0c;首先安利一个软件Navicat Premium&#xff0c;用来查询数据库很方便 QMysql驱动是Qt SQL模块使用的插件&#xff0c;用于与MySQL数据库进行通信。要编译QMysql驱动&#xff0c;您需要满足以下条件&#xff1a; 您需要安装MySQL的客户端库和开发头文件…
阅读更多...
JVM——类加载器

JVM——类加载器

回顾一下类加载过程 类加载过程&#xff1a;加载->连接->初始化。连接过程又可分为三步:验证->准备->解析。 一个非数组类的加载阶段&#xff08;加载阶段获取类的二进制字节流的动作&#xff09;是可控性最强的阶段&#xff0c;这一步我们可以去完成还可以自定义…
阅读更多...
常用curl参数及样例讲解

常用curl参数及样例讲解

1 缘起 后端/后台项目开发过程中&#xff0c;有两个阶段的接口测试和验证&#xff0c;自测阶段&#xff0c;通过Postman构建请求&#xff0c; 自建一些参数&#xff0c;测试功能以及边界条件&#xff0c;这些都是可以自行掌控的&#xff0c;当完成功能验证与前端对接时&#x…
阅读更多...
ForkJoinPool继承类RecursiveTask

ForkJoinPool继承类RecursiveTask

package com.cdkj.project.syn.common;/*** author YUFEI* ClassName SearchFiles* description: TODO* date 2023年05月18日* version: 1.0*/import java.io.File; import java.util.ArrayList; import java.util.List; import java.util.concurrent.ForkJoinPool; import jav…
阅读更多...
Spring Boot(六十四)：SpringBoot集成Gzip压缩数据

Spring Boot(六十四)：SpringBoot集成Gzip压缩数据

1 实现思路 2 实现 2.1 创建springboot项目 2.2 编写一个接口，功能很简单就是传入一个Json对象并返回 package com.example.demo.controller;import com.example.demo.entity.Advertising; import lombok.Data; import lombok.extern.slf4j.Slf4j; import org.springframewo…
阅读更多...
QT处理日志文件

QT处理日志文件

由于实际生产需要&#xff0c;软件系统的运行&#xff0c;会产生大量的日志文件&#xff0c;有时候一天就能产生超过百万条log记录&#xff0c;那么为了能够处理日志文件&#xff0c;查询并且找到我们想要的报错信息&#xff0c;因此不得不考虑怎么实现&#xff0c;打开大日志文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023