echarts 3D 柱状图

echarts 3D 柱状图

实例图片：

---

.html 文件

<div>
  <div id="mainbar" class="mainbar"></div>
</div>

.ts 文件

eachartBarfunttion() {
    let chartDom = <HTMLInputElement>document.getElementById('mainbar');
    let myChart = echarts.init(chartDom, null, {
      width: 900,//获取父级的宽//初始化默认的宽
      height: 400//获取父级的高//初始化默认的高
    });
    //监听页面的 window.onresize 事件获取浏览器大小改变的事件，
    //然后调用 echartsInstance.resize 改变图表的大小
    this.resizeBarFun = () => {
      console.log("mainbar.clientWidth:", document.getElementById('mainbar').clientWidth)
      console.log("mainbar.clientHeight:", document.getElementById('mainbar').clientHeight)
      myChart.resize({
        width: document.getElementById('mainbar').clientWidth,//获取父级的宽
        height: document.getElementById('mainbar').clientHeight//获取父级的高
      })
    }
    window.addEventListener('resize', this.resizeBarFun);

    let option;
       option = {
      // 标题
      title: {
        text: '3D柱状图',
        x: 'center'//横向居中
      },
      //x轴
      xAxis: {
        type: 'category',//坐标轴类型
        //type: 'value' 数值轴，适用于连续数据。
        //type: 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，
        // 或者可通过 xAxis.data 设置类目数据。,category与data一起使用
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      // y轴
      yAxis: {
        type: 'value'
      },
      // 直角坐标系内绘图网格
      grid: {
        containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
      },
      // 图例组件
      legend: {
        bottom: '5%'
      },
      // 提示框组件。
      tooltip: {},
      series: [
        {

          type: 'bar',//柱状图
          barWidth: '40',//柱条的宽度，不设时自适应。
          data: [120, 200, 150, 80, 70, 110, 130],
          backgroundStyle: {//是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
            color: 'none',
          },
          itemStyle: {//图形样式。
            color: {
              type: 'linear',
              x: 0, x2: 1, y: 0, y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#00FFFF',
                },
                {
                  offset: 0.5,
                  color: '#00FFFF',
                },
                {
                  offset: 0.5,
                  color: '#11A6D0',
                },
                {
                  offset: 1,
                  color: '#11A6D0',
                },
                {
                  offset: 0,
                  color: '#83bac9',
                },
                {
                  offset: 0,
                  color: 'rgba(17,166,208,0.3)',
                },
              ]
            }
          },
        },
        {
          z: 2,//控制图形的前后顺序
          symbolPosition: 'start',
          //symbolPosition:'start'：图形边缘与柱子开始的地方内切。
          // symbolPosition:'end'：图形边缘与柱子结束的地方内切。
          // symbolPosition:'center'：图形在柱子里居中。
          type: 'pictorialBar',//象形柱图是可以设置各种具象图形元素
          data: [120, 200, 150, 80, 70, 110, 130],
          symbol: 'diamond',柱子显示的样式，'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolOffset: [0, '50%'],
          symbolSize: [40, 10],
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00FFFF',
                  },
                  {
                    offset: 0.5,
                    color: '#00FFFF',
                  },
                  {
                    offset: 0.5,
                    color: '#11A6D0',
                  },
                  {
                    offset: 1,
                    color: '#11A6D0',
                  },
                  {
                    offset: 0,
                    color: '#83bac9',
                  },
                  {
                    offset: 0,
                    color: 'rgba(17,166,208,0.3)',
                  },
                ]
              }
            },
          },

        },
        {
          z: 3,//控制图形的前后顺序
          type: 'pictorialBar',
          symbolPosition: 'end',
          //symbolPosition:'start'：图形边缘与柱子开始的地方内切。
          // symbolPosition:'end'：图形边缘与柱子结束的地方内切。
          // symbolPosition:'center'：图形在柱子里居中。
          data: [120, 200, 150, 80, 70, 110, 130],
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [40, 40 * 0.25],
          itemStyle: {
            normal: {
              color: '#00FFFF',
           
            },
          },
        },



      ]
    };

    option && myChart.setOption(option);
  }