3D柱状图1

预览图：

 

import React, { Component } from 'react';
import * as echart from 'echarts';
import { compare } from '@/utils/tools';
import style from './index.less';

/**
 *  3D柱状图
 *  @param {string[]} xAxis                   X轴数据
 *  @param {string} barColor                  柱状颜色
 *  @param {object[]} barData                 柱状数据
 *  @param {number} barWidth                  柱状宽度
 *  @param {number|number[]} barBorderRadius  柱状圆角
 *  @param {Object} optionObj
 *
 */
class ManyPie extends Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
  }
  chartRef;
  chart;

  componentDidUpdate() {
    this.init()
  }

  componentDidMount() {
    this.init()
  }

  init() {
    // 基于准备好的dom，初始化echart实例
    if (this.chart != null && this.chart != "" && this.chart != undefined) {
      this.chart.dispose();//解决echarts dom已经加载的报错
    }
    // 基于准备好的dom，初始化echart实例
    this.chart = echart.init(this.chartRef.current, null, { devicePixelRatio: 2.5 });
    this.chart.clear();
    this.setOptions();

    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  }
  barColor = ['#41C6E8', '#F5D66E', '#95D171'];
  barData = [
    { x: "Sun", value: 22 },
    { x: "Mon", value: 18 },
    { x: "Tue", value: 19 },
    { x: "Wed", value: 23 },
    { x: "Thu", value: 29 }
  ]
  setOptions() {
    const { title = false, subtitle = '', xAxis = this.xAxis, barColor = this.barColor, barWidth = 4, barData = this.barData, barBorderRadius = [10, 10, 0, 0], optionObj = {} } = this.props;
    const offsetX = 20;
    const offsetY = 10;
    let x = [];
    let y = [];
    barData.forEach((item, index) => {
      x.push(item.x)
      y.push(item.value)
    })
    // 绘制左侧面
    const CubeLeft = echart.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x, shape.y - 1]; // 右上
        const c1 = [shape.x - offsetX + 5, shape.y - offsetY + 2]; // 左上
        const c2 = [xAxisPoint[0] - offsetX + 5, xAxisPoint[1] - offsetY + 2]; // 左下
        const c3 = [xAxisPoint[0], xAxisPoint[1]]; // 右下
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
      },
    });
    // 绘制右侧面
    const CubeRight = echart.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x, shape.y - 1]; // 左上
        const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 左下
        const c3 = [xAxisPoint[0] + offsetX - 5, xAxisPoint[1] - offsetY + 2]; //  右下
        const c4 = [shape.x + offsetX - 5, shape.y - offsetY + 2]; // 右上
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
      },
    });
    // 绘制顶面
    const CubeTop = echart.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx, shape) {
        const c1 = [shape.x, shape.y - 1]; // 下点
        const c2 = [shape.x + offsetX - 5, shape.y - offsetY + 2]; //右点
        const c3 = [shape.x, shape.y - offsetX + 5]; // 上点
        const c4 = [shape.x - offsetX + 5, shape.y - offsetY + 2]; // 左点
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
      },
    });
    // 绘制底面
    const CubeBottom = echart.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [xAxisPoint[0] - offsetX + 5, xAxisPoint[1] - offsetY + 2]; // 左
        const c2 = [xAxisPoint[0], xAxisPoint[1]]; // 下
        const c3 = [xAxisPoint[0] + offsetX - 5, xAxisPoint[1] - offsetY + 2]; //  右
        const c4 = [xAxisPoint[0], xAxisPoint[1] - 16]; // 上
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
      },
    });
    // 注册三个面图形
    echart.graphic.registerShape('CubeLeft', CubeLeft);
    echart.graphic.registerShape('CubeRight', CubeRight);
    echart.graphic.registerShape('CubeTop', CubeTop);
    echart.graphic.registerShape('CubeBottom', CubeBottom);


    var option = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function (params, ticket, callback) {
          const item = params[1];
          return item.name + ' : ' + item.value;
        },
      },
      grid: {
        left: 0,
        right: 0,
        top: '5%',
        bottom: '5%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: x,
        offset: 5,
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          fontSize: 12,
          color: 'rgba(255, 255, 255, 1)',
          fontFamily: 'TengXunZiTi'
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          fontSize: 12,
          color: 'rgba(255, 255, 255, 1)',
          fontFamily: 'TengXunZiTi'
        },
        // boundaryGap: ['20%', '20%'],
      },
      series: [
        {
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
              type: 'group',
              children: [
                {
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    stroke: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: 'rgba(38, 206, 255, 0.2)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(38, 206, 255, 1)',
                      },
                    ]),
                    fill: new echart.graphic.LinearGradient(0, 0, 0, 0.8, [
                      {
                        offset: 0,
                        color: 'rgba(2, 107, 138, 0.1)',
                        // color: 'red',
                      },
                      {
                        offset: 0.6,
                        color: 'rgba(38, 206, 255, 0.3)',
                        // color: 'gold',
                      },
                      {
                        offset: 1,
                        color: 'rgba(38, 206, 255, 0.7)',
                        // color: 'gold',
                      },
                    ]),
                  },
                },
                {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    stroke: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: 'rgba(38, 206, 255, 0.2)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(38, 206, 255, 1)',
                      },
                    ]),
                    fill: new echart.graphic.LinearGradient(0, 0, .7, 0.8, [
                      {
                        offset: 0,
                        color: 'rgba(2, 107, 138, 0.1)',
                        // color: 'red',
                      },
                      {
                        offset: 0.6,
                        color: 'rgba(38, 206, 255, 0.3)',
                        // color: 'gold',
                      },
                      {
                        offset: 1,
                        color: 'rgba(38, 206, 255, 0.7)',
                        // color: 'gold',
                      },
                    ]),
                  },
                },
                {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: 'rgba(5, 150, 193, 1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(38, 206, 255, 1)',
                      },
                    ]),
                  },
                },
                {
                  type: 'CubeBottom',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    stroke: 'rgba(105, 213, 243, 0.6)',
                    fill: new echart.graphic.LinearGradient(0, 0, 0.7, 0.4, [
                      {
                        offset: 0,
                        color: 'rgba(105, 213, 243, 0.28)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(105, 213, 243, 0.28)',
                      },
                    ]),
                  },
                },
              ],
            };
          },
          data: y,
        },
        {
          type: 'bar',
          label: {
            normal: {
              show: false,
              position: 'top',
              formatter: (e) => {
                return e.value + '次';
                /*console.log(e)
                switch (e.name) {
                    case '1001':
                        return e.value;
                    case '1002':
                        return y[1];
                    case '1003':
                        return y[2];
                }*/
              },
              fontSize: 16,
              color: '#43C4F1',
              offset: [0, -25],
            },
          },
          itemStyle: {
            color: 'transparent',
          },
          tooltip: {},
          data: y
        },
      ],
    };


    // 绘制图表
    this.chart.setOption(option);
    window.onresize = () => {
      this.chart.resize();
    }
  }

  render() {
    const { width, height } = this.props;
    return (
      <div ref={this.chartRef} style={{ width: width ? width : `100%`, height: height ? height : '100%' }}></div>
    )
  }
}

export default ManyPie;

 

参考：http://analysis.datains.cn/finance-admin/index.html#/chartLib/all