echarts实现3d柱状效果

已于 2024-07-26 15:14:12 修改
阅读量624 收藏 1
点赞数 3
文章标签： echarts 前端 javascript
于 2024-07-19 17:01:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59017683/article/details/140552642
版权

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

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

_大龄
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
使用echarts 实现3D地球
08-13
**使用ECharts实现3D地球**\n\nECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持自定义交互和动画效果。在ECharts中，3D地球的实现是通过其强大的3D渲染...
echarts-3D柱状图
xu_xu_0924的博客
05-13 1360
第一种 <div id="pie" style=“height:200px”></div> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('pie')); var xData = ["UPS", "主机", "存储","网络设备"]; var yData = [13,10,9,5]; var option = { "grid": {
echarts实现3D柱状图(视觉层面)
最新发布
qq_44624290的博客
07-02 884
文章知识点与官方知识档案匹配，可进一步学习相关知识。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。完整实例，copy就可直接使用。42665 人正在系统学习中。
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 1万+
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts 3D 柱状图
热门推荐
aibujin的博客
05-20 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
Echarts实现3D柱状图
qq_45787691的博客
04-22 1636
echarts实现3D柱状图。
echarts 3d柱状图
徐___L
02-16 3402
echarts 3d柱状图
echarts3D柱状图
qq_40295815的博客
09-26 1653
i < 5;++i) {}option = {},},},},},},},},},},},},},{},{
echarts结合echarts-gl实现3D飞线地球可视化
08-05
ECharts-GL提供了3D地图、粒子系统、3D柱状图等多种3D图表，其中3D飞线图用于展现地理路径，如航线、航班轨迹等。要实现3D飞线地球，你需要创建一个HTML页面，引入ECharts和ECharts-GL的JavaScript库，并设置一个...
echarts 3d饼图资源
05-12
它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持交互功能和多种自定义选项，使得开发者能够创建出美观且功能强大的数据展示效果。在本资源中，重点是 ECharts 的 3D 饼图。 3D 饼图是 ECharts 提供...
echarts柱状图
11-11
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、饼图等，能够满足各种数据分析和展示的需求。在本篇中，我们将深入探讨ECharts中的柱状图...
echarts--3D效果柱状图
生命不息，学习不止
07-05 1415
柱状图实现3D效果
echarts 实现 3d 柱状图
weixin_38992765的博客
07-28 5427
echart+vue3 实现 3d 柱状图
echarts绘制三维柱状图
pengbr的博客
06-02 1547
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示。ECharts 支持丰富的图表类型，如折线图、柱状图、饼图、地图、K线图等，可以满足不同类型数据的展示需求。 文档地址：echarts 本次所绘制三维柱状图主要使用的是示例源代码，在此基础上做了些修改。 引入CDN 使用echarts需要导入echarts和echarts-gl。 免费的CDN服务可访问网址：Staticfile CDN <!-- 引入 ECharts 文件 --> &
echarts实现3D柱状图
07-27
要实现echarts的3D柱状图，可以参考以下步骤： 1. 首先，你可以查看echarts官方网站，了解echarts自定义图形的详细用法。\[1\] 2. 参考你提供的案例，可以创建左右两个面，也就是两个柱子。为了形成一点对比，可以稍微调整左右两个面的颜色。同时，可以使用"type: 'pictorialBar'"来实现底部和顶部的效果。\[2\] 3. 在代码中，可以设置柱状图的柱宽（barWidth）为一个固定值，例如30。如果改动这个值导致柱子形状变形，可以调整series中每一个对象的symbolOffset的值。\[3\] 4. 对于双柱状图，可以在series数组中定义多个元素，前几个元素表示"本期"柱状图，后几个元素表示"同期"柱状图。每个柱子都由上中下三部分组成，因此需要定义多个series元素来表示柱子的主体部分、底部和顶部。为了达到整体性的效果，每个柱状图的三部分颜色需要统一。\[3\] 通过以上步骤，你可以实现echarts的3D柱状图。希望对你有帮助！ #### 引用[.reference_title] - *1* [echarts实现3d柱状图的两种方式](https://blog.csdn.net/weixin_69773376/article/details/128199545)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts 3d柱状图](https://blog.csdn.net/xuyanl/article/details/128011860)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [echarts实现3D效果柱状图](https://blog.csdn.net/dqfkkll/article/details/120287486)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值