论坛 › 物联网 › echarts实现3d柱状效果

小小小幸运 发表于 2024-7-23 15:14:12

echarts实现3d柱状效果

https://i-blog.csdnimg.cn/direct/81658338a82b4e1d890a2a34bc215c1e.png
https://i-blog.csdnimg.cn/direct/7a76b9d3f29046b190edd94c4f370cce.png
代码如下，单个的调第一个方法，多个柱状的调第二个方法，详细情况修改参数大概二次开发即可
//3d柱状图
export function getEcharts3DBar (xAxisData:string[]=['name1','name2','name3'], data:number[]=, 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.axisValue + "：" +params.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: , // 宽，高
      symbolOffset:,// 左 上
      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:,
          // }
      },
      },
      {
      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:
      },
      },
      // 数据顶部的样式
      {
      name: '',
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ,
      symbolOffset:,
      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:
          }
      },
      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:,
      },
      data2:{//岗位人员
      name:'岗位人员',
          offset:,
          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:,
      },
    }
}*/
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.name,
      icon: 'roundRect',
      itemStyle: {
      color: obj.data.colorObj.startColor
      }
    })
    series.push( // 数据底部的圆片
      {
      name: obj.data.name,
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: , // 宽，高
      symbolOffset:obj.data.offset,// 左 上
      symbolPosition: 'start',
      z: 0,
      itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: val.data?obj.data.colorObj.bottomStartColor:'transparent' },
            { offset: 1, color: val.data?obj.data.colorObj.bottomEndColor:'transparent' }
            ]);
          }
      },
      data: obj.data.data
      },
      // 数据的柱状图
      {
      name: obj.data.name,
      type: 'bar',
      barWidth: 8, // 柱条的宽度，不设时自适应。
      showSymbol: false,
      hoverAnimation: false,
      symbolOffset:obj.data.offset,// 左 上
      data: obj.data.data,
      itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color:val.data?obj.data.colorObj.startColor:'transparent' },
            { offset: 1, color:val.data?obj.data.colorObj.endColor:'transparent' }
            ]);
          },
          // borderRadius:,
      },
      },
      {
      name: obj.data.name,
      type: 'bar',
      barWidth: 8, // 柱条的宽度，不设时自适应。
      symbolOffset:obj.data.offset,// 左 上
      barGap: '0', // 不同系列的柱间距离
      data: obj.data.data,
      itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: val.data?obj.data.colorObj.startColor:'transparent' },
            { offset: 1, color: val.data?obj.data.colorObj.endColor:'transparent' }
            ]);
          },
          borderWidth: 0.1,
          borderColor:'#B0E1FF',
          // barBorderRadius:
      },
      },
      // 数据顶部的样式
      {
      name: obj.data.name,
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ,
      symbolOffset:obj.data.offset,// 左 上
      symbolPosition: 'end',
      z: 3,
      itemStyle: {
          color: (val) => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: val.data?obj.data.colorObj.topStartColor:'transparent' },
            { offset: 1, color: val.data?obj.data.colorObj.topEndColor:'transparent' }
            ]);
          },
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: {
            fontSize: '12',
            color: '#B0E1FF'
            },
            offset:
          }
      },
      data: obj.data.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.axisValue+"</div>";
      str += "<br/>" + "<div>" + `<span style='${circle1}' >` + "</span>" + params.seriesName + "：" +params.value+"</div>";
      str += "<br/>" + "<div>"+ `<span style='${circle2}' >` + "</span>" + params.seriesName + "：" + params.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:
      },
      textStyle:{
      color:'#fff'
      },
      data:legendData,
    },
    series:series
};
}


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: echarts实现3d柱状效果