stackedBarOption

堆叠柱图 + 折线图 options配置

import { getColor } from '../../util';
export function stackedBarOption(props) {
  const { data, xData, yAxis = false, yAxisIndex, theme } = props;
  const { length } = data;
  const legendData = data.map(it => it.label);
  const _options = {
    color: getColor(length),
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50,50,50,.8)',
      textStyle: { color: '#ccc' },
      enterable: true,
      extraCssText: 'max-height: 300px; overflow: auto;',
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        axisLine: { show: false },
        axisTick: { show: false },
        // 改为虚线网格
        splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
        axisLabel: { color: '#9da5b2', fontSize: '11' },
        ...(yAxis && yAxis),
      },
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisTick: {
        lineStyle: { color: '#c1c5ca41' },
        alignWithLabel: true,
      },
      splitLine: { show: false },
      axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
      axisLabel: { color: '#9da5b2', fontSize: '11' },
    },
    series: data.map(it => {
      return {
        data: it.value,
        name: it.label,
        type: it.type || 'bar',
        yAxisIndex: it.yAxisIndex,
        stack: it.type === 'bar' ? 'Count' : null,
        symbol: 'none',
        maxWidth: 24,
      };
    }),
    grid: {
      top: length > 1 ? 40 : 24,
      right: 8,
      bottom: 0,
      left: 0,
      containLabel: true,// 防止标签溢出
    },
    legend: {
      type: 'scroll',
      show: length > 1,
      data: legendData,
      icon: 'roundRect',
      top: -4,
      itemWidth: 12,
      itemHeight: 10,
      textStyle: {
        color: theme === 'dark' ? '#fff' : '#333',
      },
    },
  };
  if (yAxisIndex && typeof yAxisIndex === 'object') {
    _options.yAxis.push(yAxisIndex);
  }
  return _options;
}