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:

相关推荐

  1. vue运用之echart3D效果案例代码

    2024-07-20 01:12:02       56 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 01:12:02       51 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 01:12:02       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 01:12:02       44 阅读
  4. Python语言-面向对象

    2024-07-20 01:12:02       55 阅读

热门阅读

  1. __setitem__

    2024-07-20 01:12:02       16 阅读
  2. sklearn基础教程:从入门到精通

    2024-07-20 01:12:02       16 阅读
  3. 翁恺-C语言程序设计-11-0. 平面向量加法

    2024-07-20 01:12:02       19 阅读
  4. 什么是ZAB协议?

    2024-07-20 01:12:02       13 阅读
  5. 驱动开发系列04-中断处理

    2024-07-20 01:12:02       19 阅读