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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自动驾驶仿真:基于Carsim开发的加速度请求模型

文章目录 前言一、加速度输出变量问题澄清二、配置Carsim动力学模型三、配置Carsim驾驶员模型四、添加VS Command代码五、Run Control联合仿真六、加速度模型效果验证 前言 1、自动驾驶行业中&#xff0c;算法端对于纵向控制的功能预留接口基本都是加速度&#xff0c;我们需要…

git环境超详细配置说明

一&#xff0c;简介 在git工具安装完成之后&#xff0c;需要设置一下常用的配置&#xff0c;如邮箱&#xff0c;缩写&#xff0c;以及git commit模板等等。本文就来详细介绍些各个配置如何操作&#xff0c;供参考。 二&#xff0c;配置步骤 2.1 查看当前git的配置 git conf…

解决ios隔空播放音频到macos没有声音的问题

解决ios隔空播放音频到macos没有声音的问题 一、检查隔空播放支持设备和系统要求二、打开隔空播放接收器三、重置MAC控制中心进程END 一、检查隔空播放支持设备和系统要求 Mac、iPhone、iPad 和 Apple Watch 上“连续互通”的系统要求 二、打开隔空播放接收器 ps;我设备是同一…

基于web的停车场收费管理系统/基于springboot的停车场管理系统

摘 要 随着汽车工业的迅猛发展&#xff0c;我国汽车拥有量急剧增加。停车场作为交通设施的组成部分,随着交通运输的繁忙和不断发展&#xff0c;人们对其管理的要求也不断提高&#xff0c;都希望管理能够达到方便、快捷以及安全的效果。停车场的规模各不相同,对其进行管理的模…

剪枝基础与实战(3): 模型剪枝和稀疏化训练流程

Model Pruning 相关论文:Learning Efficient Convolutional Networks through Network Slimming (ICCV 2017) 考虑一个问题,深度学习模型里面的卷积层出来之后的特征有非常多,这里面会不会存在一些没有价值的特征及其相关的连接?又如何去判断一个特征及其连接是否有价值? …

redis实战-缓存数据解决缓存与数据库数据一致性

缓存的定义 缓存(Cache),就是数据交换的缓冲区,俗称的缓存就是缓冲区内的数据,一般从数据库中获取,存储于本地代码。防止过高的数据访问猛冲系统,导致其操作线程无法及时处理信息而瘫痪&#xff0c;这在实际开发中对企业讲,对产品口碑,用户评价都是致命的;所以企业非常重视缓存…

【汇编语言】使用DS和[address]实现字的传送

文章目录 要解决的问题&#xff1a;CPU从内存单元中读取数据字的传送 要解决的问题&#xff1a;CPU从内存单元中读取数据 1、要求&#xff1a;CPU要读取一个内存单元时&#xff0c;必须先给出这个内存单元的地址&#xff1b; 2、原理&#xff1a;8086设备中&#xff0c;内存地…

LeetCode--HOT100题(35)

目录 题目描述&#xff1a;23. 合并 K 个升序链表&#xff08;困难&#xff09;题目接口解题思路1代码解题思路2代码 PS: 题目描述&#xff1a;23. 合并 K 个升序链表&#xff08;困难&#xff09; 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合…

git压缩/合并多次commit提交为1次commit提交

git压缩/合并N次commit提交为1次commit提交 假设有最近3次提交&#xff1a; commit_id1 commit_id2 commit_id3目标是把以上3次commit合并成1个commit&#xff0c;注意&#xff0c;最新的commit提交在最上面。 在git bash里面的操作步骤&#xff1a; &#xff08;1&#xff0…

【周末闲谈】关于“数据库”你又知道多少?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言数据库数据库的五大特点数据库介绍数据库管理系统&a…

Oracle故障案例之-19C时区补丁DSTV38更新

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61…

《TCP IP网络编程》第二十四章

第 24 章 制作 HTTP 服务器端 24.1 HTTP 概要 本章将编写 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;服务器端&#xff0c;即 Web 服务器端。 理解 Web 服务器端&#xff1a; web服务器端就是要基于 HTTP 协议&#xff0c;将网页对…

2023国赛数学建模E题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…

RK3588平台开发系列讲解(AI 篇)RKNN-Toolkit2 API 介绍

文章目录 一、RKNN 初始化及对象释放二、RKNN 模型配置沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要讲解 RKNN-Toolkit2 API 详细说明。 一、RKNN 初始化及对象释放 在使用 RKNN Toolkit2 的所有 API 接口时,都需要先调用 RKNN()方法初始化 RKNN 对象,…

图数据库_Neo4j和SpringBoot整合使用_实战创建明星关系图谱---Neo4j图数据库工作笔记0010

然后我们再来看一下这个明星关系图谱 可以看到这里 这个是原来的startRelation 我们可以写CQL去查询对应的关系 可以看到,首先查询出来以后,然后就可以去创建 我们可以把写的创建明星关系的CQL,拿到 springboot中去执行 可以看到,这里我们先写一个StarRelationRepository,然…

工作6年了日期时间格式化还在写YYYY疯狂给队友埋雷

前言 哈喽小伙伴们好久不见&#xff0c;今天来个有意思的雷&#xff0c;看你有没有埋过。 正文 不多说废话&#xff0c;公司最近来了个外地回来的小伙伴&#xff0c;在广州工作过6年&#xff0c;也是一名挺有经验的开发。 他提交的代码被小组长发现有问题&#xff0c;给打回了&…

【C语言练习】数组OJ题

目录 一.消失的数字思路1&#xff1a;思路2&#xff1a; 二.移除元素三.轮转数组四.删除有序数组中的重复项五.合并两个有序数组 一.消失的数字 题目&#xff1a; 思路1&#xff1a; 数组是从0加到N&#xff0c;所以把0到N的数加起来减去数组中的值&#xff0c;结果就是消失…

文心一言最新重磅发布!

8月16日&#xff0c;由深度学习技术及应用国家工程研究中心主办的WAVE SUMMIT深度学习开发者大会2023举办。百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰以《大语言模型为通用人工智能带来曙光》为题&#xff0c;阐述了大语言模型具备理解、生成、逻辑、记忆…

【学习日记】【FreeRTOS】时间片的实现

前言 本文以野火的教程和代码为基础&#xff0c;对 FreeRTOS 中时间片的概念作了解释&#xff0c;并且给出了实现方式&#xff0c;同时发现并解决了野火教程代码中的 bug。 一、时间片是什么 在前面的文章中&#xff0c;我们已经知道任务根据不同的优先级被放入就绪列表中不…

Linux 安全技术和防火墙

目录 1 安全技术 2 防火墙 2.1 防火墙的分类 2.1.1 包过滤防火墙 2.1.2 应用层防火墙 3 Linux 防火墙的基本认识 3.1 iptables & netfilter 3.2 四表五链 4 iptables 4.2 数据包的常见控制类型 4.3 实际操作 4.3.1 加新的防火墙规则 4.3.2 查看规则表 4.3.…