echarts实现3d柱状效果

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

复制代码
//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
  };
}
相关推荐
come1123417 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志38 分钟前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js