使用echarts简单实现双柱状图重叠效果

1、横向 

export const focusbarChartConfig = {
  option: {
    grid: {
      top: '5%',
      left: '-80rem',
      right: '10%',
      bottom: '-10rem',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
      formatter: (v) => {
        return `${v[0].name}:${v[0].value}`;
      },
    },
    legend: {
      show: false,
      x: 'right', // 'center' | 'left' | {number},
      y: 'top', // 'center' | 'bottom' | {number}
      textStyle: { color: '#fff' },
      itemWidth: 15,
      itemHeight: 15,
      icon: 'rect',
    },
    yAxis: [
      {
        type: 'category',
        // axisTick: {
        //   show: false,
        // },
        axisLine: {
          show: false,
        },
        axisTick: {
          alignWithLabel: true,
          show: false,
        },
        axisLabel: {
          show: true,
          overflow: 'truncate',
          zlevel: 2,
          color: '#fff',
          width: 90,
          margin: 100,
          align: 'left',
        },

        splitLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        data: [],
      },
      {
        type: 'category',
        // inverse: true,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          // inside: true,
          formatter: '{value}人',
          color: '#fff',
        },
        data: [],
      },
    ],
    xAxis: [
      {
        show: false,
      },
    ],
    series: [
      {
        type: 'bar',
        hoverAnimation: false,
        barCategoryGap: 30,
        barWidth: 7,
        emphasis: {
          disabled: true,
        },
        label: {
          show: false,
          position: 'right',
          color: '#22d285',
        },
        itemStyle: {
          normal: {
            borderRadius: 10,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgb(34,210,133,1)',
              },
              {
                offset: 1,
                color: 'rgb(55,185,255,1)',
              },
            ]),
          },
        },
        data: [],
      },
      {
        type: 'bar',
        animation: false,
        emphasis: {
          disabled: true,
        },
        barGap: '-100%',
        zlevel: -5,
        itemStyle: {
          normal: {
            color: 'rgb(136,185,255,0.5)',
            borderRadius: 10,
          },
        },

        barCategoryGap: 30,
        barWidth: 7,
      },
    ],
  },
};

const [focusPerson, setFocusPerson] = useState(focusbarChartConfig);
const getData = ()=>{

 const focusData = [
     
      { value: 12, name: '刑满释放人员' },
      { value: 3, name: '社区矫正人员' },
      { value: 4, name: '肇事肇祸等严重精神障碍患者' },
      { value: 66, name: '吸毒人员' },
      { value: 4, name: '艾滋病危险人员' },
      { value: 2, name: '邪教人员' },
      { value: 2, name: '重点信访人员' },
      { value: 7, name: '重点青少年' },
    ];
const focusvalue = focusData.reduce((acc, cur, index) => {
     acc.push(cur.value);
     return acc;
  }, []);

  const focuslabel = focusData.reduce((acc, cur, index) => {
   acc.push(cur.name);
   return acc;
    }, []);

    focusPerson.option.series[0].data = focusvalue;
    focusPerson.option.yAxis[0].data = focuslabel;
    focusPerson.option.yAxis[1].data = focusvalue;
    let tmparr = [];
    const max = Math.max.apply(null, focusvalue);
    for (let i = 0; i < focusvalue.length; i++) {
      tmparr[i] = max || 0;
    }
    focusPerson.option.series[1].data = tmparr;
setFocusPerson({ ...focusPerson });
}

2、竖状

 

 

export const focusbarChartConfig = {
  option: {
    grid: {
      top: '5%',
      left: '1%',
      right: '1%',
      bottom: '2%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
      formatter: (v) => {
        return `${v[0].name}:${v[0].value}`;
      },
    },
    legend: {
      show: false,
      x: 'right', // 'center' | 'left' | {number},
      y: 'top', // 'center' | 'bottom' | {number}
      textStyle: { color: '#fff' },
      itemWidth: 15,
      itemHeight: 15,
      icon: 'rect',
    },
    xAxis: [
      {
        type: 'category',
        // axisTick: {
        //   show: false,
        // },
        axisLine: {
          show: false,
        },
        axisTick: {
          alignWithLabel: true,
          show: false,
        },
        axisLabel: {
          boundaryGap: false, // 不留白，从原点开始
          show: true,
          overflow: 'truncate',
          zlevel: 2,
          color: '#fff',
          interval: 0,
          align: 'center',

          formatter: function (params) {
            var newParamsName = '';
            var paramsNameNumber = params.length;
            var provideNumber = 4; //一行显示几个字
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              //两行展示
              for (var p = 0; p < 2; p++) {
                var tempStr = '';
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p == rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + '\n';
                }
                newParamsName += tempStr;
              }
              //换行时....
              // newParamsName = newParamsName.substring(0, newParamsName.length - 1) + '...' + ' ';
              console.log(p);
              if (rowNumber > 2) {
                newParamsName = newParamsName.substring(0, 2 * provideNumber) + '...' + ' ';
              } else {
                newParamsName = newParamsName;
              }
            } else {
              newParamsName = params;
            }
            return newParamsName;
          },
        },
        splitLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        data: [],
      },
    ],
    yAxis: [
      {
        show: false,
      },
    ],
    series: [
      {
        type: 'bar',
        hoverAnimation: false,
        barCategoryGap: 30,
        barWidth: 18,
        emphasis: {
          disabled: true,
        },
        label: {
          show: false,
          position: 'right',
          color: '#22d285',
        },
        itemStyle: {
          normal: {
            borderRadius: 10,
            color: 'rgb(36,216,205,1)',
          },
        },
        data: [],
      },
      {
        type: 'bar',
        animation: false,
        emphasis: {
          disabled: true,
        },
        barGap: '-100%',
        zlevel: -5,
        itemStyle: {
          normal: {
            color: 'rgb(237,238,240,1)',
            borderRadius: 10,
          },
        },

        barCategoryGap: 30,
        barWidth: 18,
      },
    ],
  },
};

 

const [focusPerson, setFocusPerson] = useState(focusbarChartConfig);
const getData = ()=>{

 const focusData = [
     
      { value: 12, name: '刑满释放人员' },
      { value: 3, name: '社区矫正人员' },
      { value: 4, name: '肇事肇祸等严重精神障碍患者' },
      { value: 66, name: '吸毒人员' },
      { value: 4, name: '艾滋病危险人员' },
      { value: 2, name: '邪教人员' },
      { value: 2, name: '重点信访人员' },
      { value: 7, name: '重点青少年' },
    ];
const focusvalue = focusData.reduce((acc, cur, index) => {
     acc.push(cur.value);
     return acc;
  }, []);

  const focuslabel = focusData.reduce((acc, cur, index) => {
   acc.push(cur.name);
   return acc;
    }, []);

   focusPerson.option.series[0].data = focusvalue;
    focusPerson.option.xAxis[0].data = focuslabel;
    focusPerson.option.series[0].data = focusvalue;
    let tmparr = [];
    const max = Math.max.apply(null, focusvalue);
    for (let i = 0; i < focusvalue.length; i++) {
      tmparr[i] = max || 0;
    }
    focusPerson.option.series[1].data = tmparr;
setFocusPerson({ ...focusPerson });
}