echarts实现3d柱状效果

news2024/11/13 9:26:45

代码如下,单个的调第一个方法,多个柱状的调第二个方法,具体情况修改参数或者二次开发即可

//3d柱状图
export function getEcharts3DBar (xAxisData:string[]=['name1','name2','name3'], data:number[]=[1,2,3], colorObj:IBaseObject={
  topStartColor:'rgba(236, 191, 55)',
  topEndColor:'rgba(236, 191, 55)',
  startColor:'rgba(71, 57, 30)',
  endColor:'rgba(236, 191, 55)',
  bottomStartColor:'rgba(236, 191, 55)',
  bottomEndColor:'rgba(236, 191, 55)'
}) {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor:'rgba(255,255,255,.1)',
      borderColor:'rgba(40, 60, 74)',
      textStyle:{
        align:'left',
        fontSize: 10,//字体大小
        color:'#fff',
      },
      formatter: function (params) {
        var str = params[0].axisValue + ":" +params[0].value;
        return str;
      },
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      data: xAxisData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#cae2ee' // 设置Y轴文字颜色为蓝色
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: 'ture', // 是否显示y轴分割线
        interval: 'auto', // 坐标轴分隔线的显示间隔
        lineStyle: {
          color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
          width: 1, // 分隔线线宽
          type: 'dashed', // 线的类型
          opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
        }
      },
      axisLabel: {
        color: '#cae2ee' // 设置Y轴文字颜色为蓝色
      }
    },
    series: [
      // 数据低下的圆片
      {
        name: '',
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolSize: [16,10], // 宽,高
        symbolOffset:[0,2],// 左 上
        symbolPosition: 'start',
        z: 0,
        itemStyle: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colorObj.bottomStartColor },
              { offset: 1, color: colorObj.bottomEndColor }
            ]);
          }
        },
        data: data
      },
      // 数据的柱状图
      {
        name: '',
        type: 'bar',
        barWidth: 8, // 柱条的宽度,不设时自适应。
        showSymbol: false,
        hoverAnimation: false,
        data: data,
        itemStyle: {
          // normal: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colorObj.startColor },
              { offset: 1, color: colorObj.endColor }
            ]);
          },
          borderRadius:[1,0,0,100],
          // }
        },
      },
      {
        name: '',
        type: 'bar',
        barWidth: 8, // 柱条的宽度,不设时自适应。
        barGap: '0', // 不同系列的柱间距离
        data: data,
        itemStyle: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colorObj.startColor },
              { offset: 1, color: colorObj.endColor }
            ]);
          },
          borderWidth: 0.1,
          borderColor:'#B0E1FF',
          borderRadius:[0,2,100,0]
        },
      },
      // 数据顶部的样式
      {
        name: '',
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolSize: [16,9],
        symbolOffset:[0,-4],
        symbolPosition: 'end',
        z: 3,
        itemStyle: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colorObj.topStartColor },
              { offset: 1, color: colorObj.topEndColor }
            ]);
          },
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: {
              fontSize: '12',
              color: '#B0E1FF'
            },
            offset:[0,-2]
          }
        },
        data: data
      },
    ]
  };
}
export function getEcharts3DBar1 (obj) {

  //obj的格式
  /*obj:{
    xAxisData: ['2024-07-12','2024-07-13','2024-07-14'],
      data:{
      data1:{//劳务人员
        name:'劳务人员',
          offset:[-8,-2],
          colorObj: {
          topStartColor:'rgba(236, 191, 55)',
            topEndColor:'rgba(236, 191, 55)',
            startColor:'rgba(71, 57, 30)',
            endColor:'rgba(236, 191, 55)',
            bottomStartColor:'rgba(236, 191, 55)',
            bottomEndColor:'rgba(236, 191, 55)'
        },
        data:[0,0,0],
      },
      data2:{//岗位人员
        name:'岗位人员',
          offset:[8,-2],
          colorObj: {
          topStartColor:'rgba(21, 205, 217)',
            topEndColor:'rgba(10, 72, 140)',
            startColor:'rgba(10, 72, 140)',
            endColor:'rgba(53, 152, 212)',
            bottomStartColor:'rgba(53, 152, 212)',
            bottomEndColor:'rgba(53, 152, 212)'
        },
        data:[0,0,0],
      },
    }
  }*/
  let series = [],legendData=[],
    circle1=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data1.colorObj.startColor}`,
    circle2=`width: 10px;height: 10px;display: inline-block;border-radius: 50%;margin-right:5px;background:${obj.data.data2.colorObj.startColor}`
  for(let key in obj.data){
    legendData.push({
      name: obj.data[key].name,
      icon: 'roundRect',
      itemStyle: {
        color: obj.data[key].colorObj.startColor
      }
    })
    series.push( // 数据底部的圆片
      {
        name: obj.data[key].name,
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolSize: [16,10], // 宽,高
        symbolOffset:obj.data[key].offset,// 左 上
        symbolPosition: 'start',
        z: 0,
        itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: val.data?obj.data[key].colorObj.bottomStartColor:'transparent' },
              { offset: 1, color: val.data?obj.data[key].colorObj.bottomEndColor:'transparent' }
            ]);
          }
        },
        data: obj.data[key].data
      },
      // 数据的柱状图
      {
        name: obj.data[key].name,
        type: 'bar',
        barWidth: 8, // 柱条的宽度,不设时自适应。
        showSymbol: false,
        hoverAnimation: false,
        symbolOffset:obj.data[key].offset,// 左 上
        data: obj.data[key].data,
        itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color:val.data?obj.data[key].colorObj.startColor:'transparent' },
              { offset: 1, color:val.data?obj.data[key].colorObj.endColor:'transparent' }
            ]);
          },
          // borderRadius:[1,0,0,100],
        },
      },
      {
        name: obj.data[key].name,
        type: 'bar',
        barWidth: 8, // 柱条的宽度,不设时自适应。
        symbolOffset:obj.data[key].offset,// 左 上
        barGap: '0', // 不同系列的柱间距离
        data: obj.data[key].data,
        itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: val.data?obj.data[key].colorObj.startColor:'transparent' },
              { offset: 1, color: val.data?obj.data[key].colorObj.endColor:'transparent' }
            ]);
          },
          borderWidth: 0.1,
          borderColor:'#B0E1FF',
          // barBorderRadius:[0,2,100,0]
        },
      },
      // 数据顶部的样式
      {
        name: obj.data[key].name,
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolSize: [16,9],
        symbolOffset:obj.data[key].offset,// 左 上
        symbolPosition: 'end',
        z: 3,
        itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: val.data?obj.data[key].colorObj.topStartColor:'transparent' },
              { offset: 1, color: val.data?obj.data[key].colorObj.topEndColor:'transparent' }
            ]);
          },
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: {
              fontSize: '12',
              color: '#B0E1FF'
            },
            offset:[0,-2]
          }
        },
        data: obj.data[key].data
      },
    )
  }

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor:'rgba(255,255,255,.1)',
      borderColor:'rgba(40, 60, 74)',
      textStyle:{
        align:'left',
        fontSize: 10,//字体大小
        color:'#fff',
      },
      formatter: function (params) {
        var str = "<div>"+params[0].axisValue+"</div>";
        str += "<br/>" + "<div>" + `<span style='${circle1}' >` + "</span>" + params[0].seriesName + ":" +params[0].value+"</div>";
        str += "<br/>" + "<div>"+ `<span style='${circle2}' >` + "</span>" + params[5].seriesName + ":" + params[5].value+"</div>";
        return str;
      },
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      data: obj.xAxisData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#cae2ee' // 设置Y轴文字颜色为蓝色
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: 'ture', // 是否显示y轴分割线
        interval: 'auto', // 坐标轴分隔线的显示间隔
        lineStyle: {
          color: ['rgba(232,236,239,.2)'], // 分隔线颜色。
          width: 1, // 分隔线线宽
          type: 'dashed', // 线的类型
          opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
        }
      },
      axisLabel: {
        color: '#cae2ee' // 设置Y轴文字颜色为蓝色
      }
    },
    legend:{
      y: 'top',
      icon:'rectangle',
      itemStyle:{
        // color:[colorObj.topStartColor,colorObj1.topStartColor]
      },
      textStyle:{
        color:'#fff'
      },
      data:legendData,
    },
    series:series
  };
}

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

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

相关文章

【中项】系统集成项目管理工程师-第2章 信息技术发展-2.1信息技术及其发展-2.1.4信息安全与2.1.5信息技术的发展

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…

css前端面试题

1.什么是css盒子模型&#xff1f; 盒子模型包含了元素内容&#xff08;content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;border&#xff09;、外边距&#xff08;margin&#xff09;几个要素。 标准盒子模型和IE盒子模型的区别在于其对元素的w…

QT调用VNC并放到一个窗口中

1.VNC资源下载 本例中的这个VNC可以从以下连接中下载&#xff0c;也可以从官网上下载&#xff0c;应该都是类似的。 https://download.csdn.net/download/xiaoding_ding/89549092 下载完成后放到项目的release文件夹中 2.程序中引用 2.1在主界面中放置一个按钮&#xff0c;…

NAS新品“翻车”后,绿联科技要上市了

在消费电子市场回暖的东风中&#xff0c;又一消费电子知名企业登陆A股。 近日&#xff0c;深圳市绿联科技股份有限公司&#xff08;下称“绿联科技”&#xff09;开启申购&#xff0c;将在创业板上市。本次上市&#xff0c;绿联科技的发行价为21.21元/股&#xff0c;发行数量为…

【自动驾驶汽车通讯协议】SPI通讯:深入理解与应用

文章目录 0. 前言1. 工作原理2. 模式与配置2.1 CPOL (Clock Polarity)2.2 CPHA (Clock Phase)2.3 组合模式 3. 特性与优势4. 在自动驾驶汽车中的应用5. 结论 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff0c;虽然参考了他人的宝贵见…

给定一整数数组,其中有p种数出现了奇数次,其他数都出现了偶数次,怎么找到这p个数?

给定一长度为m的整数数组 &#xff0c;其中有p种不为0的数出现了奇数次&#xff0c;其他数都出现了偶数次&#xff0c;找到这p个数。 要求&#xff1a;时间复杂度不大于O(n)&#xff0c;空间复杂度不大于O(1)。 由于时间复杂度不大于O(n)&#xff0c;则不能在遍历数组中嵌套遍…

SpringMVC源码深度解析(中)

接上一遍博客《SpringMVC源码深度解析(上)》继续聊。最后聊到了SpringMVC的九大组建的初始化&#xff0c;以 HandlerMapping为例&#xff0c;SpringMVC提供了三个实现了&#xff0c;分别是&#xff1a;BeanNameUrlHandlerMapping、RequestMappingHandlerMapping、RouterFunctio…

基于VMware(虚拟机) 创建 Ubunton24.04

目录 1.设置 root 密码 2. 防火墙设置 2.1 安装防火墙 2.2 开启和关闭防火墙 2.3 开放端口和服务规则 2.4 关闭端口和删除服务规则 2.5 查看防火墙状态 3. 换源 3.1 源文件位置 3.2 更新软件包 1.设置 root 密码 1. 切换到 root 用户 sudo -i 2. 设置新密码&#…

STM32 CAN外设(基于STMF103C8T6)

STM32内置bxCAN外设&#xff08;CAN控制器)&#xff0c;支持CAN2.0A和2.0B&#xff0c;可以自动发送CAN报文和按照过滤器自动接收指定CAN报文&#xff0c;程序只需处理报文数据而无需关注总线的电平细节 波特率最高可达1兆位/秒3个可配置优先级的发送邮箱2个3级深度的接…

前端表格解析方法

工具类文件 // fileUtils.tsimport { ref } from vue; import * as xlsx from xlsx;interface RowData {[key: string]: any; }export const tableData ref<RowData[]>([]);export async function handleFileSelect(url: string): Promise<void> {try {const res…

【Git远程操作】忽略特殊文件 | 配置命令别名

目录 忽略特殊文件 配置命令别名 忽略特殊文件 前面我们讲到git提供了一个特殊的配置文件.gitignore模板 在⽇常开发中&#xff0c;我们有些⽂件不想或者不应该提交到远端&#xff0c;⽐如保存了数据库密码的配置⽂件&#xff0c;那怎么让 Git 知道呢&#xff1f;在 Git ⼯作…

python-网络并发模型

3. 网络并发模型 3.1 网络并发模型概述 什么是网络并发 在实际工作中&#xff0c;一个服务端程序往往要应对多个客户端同时发起访问的情况。如果让服务端程序能够更好的同时满足更多客户端网络请求的情形&#xff0c;这就是并发网络模型。 循环网络模型问题 循环网络模型只能…

【应急响应】Windows应急响应手册(勒索病毒篇)

文章目录 前言一、勒索病毒简述保护现场确定勒索病毒家族根据勒索病毒类型寻找解决方法寻找加密器解决勒索善后阶段常规安全检查阶段 前言 本篇内容围绕勒索病毒事件进行分析&#xff0c;通过使用技术手段来确定勒索病毒家族并寻找解密方法&#xff0c;实战中过程中可参考文中…

【JavaScript 算法】堆排序:优先队列的实现

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理堆的定义堆排序的步骤 二、算法实现构建最大堆注释说明&#xff1a; 三、应用场景四、总结 堆排序&#xff08;Heap Sort&#xff09;是一种基于堆数据结构的排序算法&#xff0c;具有较好的时间复杂度表现。堆…

uniapp中给data中的变量赋值报错

排查了一上午&#xff0c;原本以为是赋值的这个变量有一个键名是空字符串的问题&#xff0c;后来发现是因为在data中定义变量是写的是{}&#xff0c;如果写成null就不会报错了&#xff0c;具体原因不清楚为什么

jmeter部署

一、windows环境下部署 1、安装jdk并配置jdk的环境变量 (1) 安装jdk jdk下载完成后双击安装包&#xff1a;无限点击"下一步"直到完成&#xff0c;默认路径即可。 (2) jdk安装完成后配置jdk的环境变量 找到环境变量中的系统变量&#xff1a;此电脑 --> 右键属性 …

java Selenium,定位 伪元素.UI自动化

Java中&#xff0c;要获取这个表单字段前面的必填标识星号“*”&#xff0c;因为是用的伪元素&#xff0c;无法直接通过常规定位获取字符&#xff0c;需要用到 JavascriptExecutor。 import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import or…

K8S实战进阶

title ‘K8S实战进阶’ date 2024-04-02T16:57:3608:00 draft true 一、搭建Kubernetes集群 1.1 搭建方案 1.1.1 minikube minikube 是一个工具&#xff0c; 能让你在本地运行 Kubernetes。 minikube 在你的个人计算机&#xff08;包括 Windows、macOS 和 Linux PC&…

【座舱域控器】座舱域的通信方案

座舱域的通信方案 座舱域控器作为整车的几大域控器之一&#xff0c;提供驾驶娱乐的功能。比如中控、副驾、仪表、HUD等。 就座舱来说&#xff0c;座舱域控制器以及MCU&#xff0c;加上一系列的硬件外设。以及再此硬件之上的软件系统&#xff0c;构成了整个座舱系统。 同时&…

【JavaScript 算法】双指针法:高效处理数组问题

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理二、算法实现示例问题1&#xff1a;两数之和 II - 输入有序数组示例问题2&#xff1a;反转字符串中的元音字母注释说明&#xff1a; 三、应用场景四、总结 双指针法&#xff08;Two Pointer Technique&#xff…