echarts实现3d柱状效果

🕗 发布于 2024-07-20 09:19 echarts 前端 javascript

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

//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
  };
}

原文地址：https://blog.csdn.net/weixin_59017683/article/details/140552642

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：iPhone手机上备忘录怎么设置字数显示
下一篇：Hive 的 classpath 简介

机器学习-梯度下降实验一
【代码】机器学习-梯度下降实验一。
阅读更多2024-09-20
Java——Static与final修饰的变量与方法(总结)
Java语法学过一遍之后，我相信大多数和我一样脑瓜子嗡嗡的，甚至有点乱了，这时候应该自己把之前的能总结的，或者不熟悉的都要总结一遍，以便于后期的学习！！
阅读更多2024-09-20
ffmpeg 拉流
保存为视频# 保存图片查看解码器：
阅读更多2024-09-20
sourceTree保姆级教程7：（合并某次提交）
在日常开发过程中，大家有时候并非都是在同一个分支进行开发，可能存在多人的情况下开发。切换到master分支，可以看到master分支落后 develop分支好多版本了，test2.txt文件对于mas
阅读更多2024-09-20
事业环境因素和组织过程资产的区别
在项目管理中，事业环境因素和组织过程资产是两个重要的概念，它们对项目的成功有着重要的影响。虽然它们都对项目执行产生影响，但它们存在本质区别。
阅读更多2024-09-20
MATLAB统计和机器学习工具箱：数据分析与建模的利器
MATLAB的统计和机器学习工具箱（Statistics and Machine Learning Toolbox）是一个功能强大的数据分析和建模工具，它为数据科学家、工程师和研究人员提供了一系列的函
阅读更多2024-09-20
配网缺陷检测无人机航拍图像数据集（不规范绑扎，螺栓销钉缺失）数据集总共3000张左右，标注为voc格式
配网缺陷检测无人机航拍图像数据集，（不规范绑扎，螺栓销钉缺失）数据集总共3000张左右，标注为voc格式
阅读更多2024-09-20
基于＂WT2605C的智能血压计：AI对话引领个性化健康管理新时代，健康守护随时在线
在当今快节奏的生活中，健康管理已成为我们日常不可或缺的一部分。随着科技的进步，智能设备正逐步融入我们的日常生活，为健康管理带来前所未有的便捷与智能化。今天，让我们共同探索WT2605C AI在线方案如
阅读更多2024-09-20
基于大语言模型（LLM）的人工智能能否引领新的工业革命？
如果我们的时代是下一个工业革命，正如许多人所声称的那样，人工智能无疑是其驱动力之一。” – 李飞飞《纽约时代周刊》专栏文章距离 OpenAI 开发的划时代人工智能产品 [ChatGPT] 于 2022
阅读更多2024-09-20
qt七个按钮进行互斥
qt七个按钮进行互斥
阅读更多2024-09-20

echarts实现3d柱状效果

相关文章