echart柱状图

    // echart处理x轴文字格式
  dealLength = params => {
    let ret = '';
    const maxLength = 4;
    const rowNum = Math.ceil(params.length / maxLength);
    if (rowNum > 1) {
      for (let i = 0; i < rowNum; i += 1) {
        let temp = '';
        const start = i * maxLength;
        const end = start + maxLength;
        temp = `${params.substring(start, end)}\n`;
        ret += temp;
      }
      return ret;
    } else {
      return params;
    }
  };

initCharts = () => {
    const monthlyAbnormalChart = echarts.init(this.monthlyAbnormalRef.current);
    const monthlyAbnormalOption = {
      legend: {
        data: this.props.abnormalType,
        left: '10%',
      },
      dataZoom: [
        // x轴的区域缩放
        {
          show: true,
          maxSpan: (15 / this.props.abnormalType.length) * 100,
        },
      ],
      tooltip: {},
      xAxis: {
        data: this.dealProductLine(),
        name: '工位',
        axisLine: { onZero: true },
        splitLine: { show: false },
        splitArea: { show: false },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 12,
          },
          interval: 0,
          formatter: value => this.dealLength(value),
        },
      },
      yAxis: {},
      grid: {
        bottom: 100,
      },

      series: this.dealSeries(),
    };
    monthlyAbnormalChart.setOption(monthlyAbnormalOption);
    window.onresize = monthlyAbnormalChart.resize;
  };

  reset = () => {
    clearInterval(this.unClosedId);
    clearInterval(this.todayClosedId);
    clearInterval(this.dataId);
    this.props.dispatch({
      type: 'abnormal/clearViewData',
    });
    const todayAbnormal = echarts.init(this.refTodayAbnormal.current);
    const distribution = echarts.init(this.refDistribution.current);

    todayAbnormal.setOption({}, true);
    distribution.setOption({}, true);

    const unClosedContent = document.getElementById('unClosedContent');
    unClosedContent.innerHTML = null;
    const todayClosedContent = document.getElementById('todayClosedContent');
    todayClosedContent.innerHTML = null;
  };