双柱形图echarts 柱状配置项内容和展示

图例左右布局，x轴数据超过4字省略号显示

      let   departmentCard = {
    xData: ['设计部门1','设计部门2','设计部门3','设计部门4','设计部门5','设计部门6','设计部门7','设计部门8','设计部门9','设计部门10'],
    yData: [
        [11,22,33,44,55,66,77,88,99,100],
         [11,22,33,44,55,66,77,88,99,100]
        ]
  };
//   左右分布图例+x轴数据超过4字省略号显示
option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                  
                }
              },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '2%',
                top: '22%',
                containLabel: true,
            },
            legend: [
                {
                    orient: 'horizontal',
                    x: '2%',
                    y: '2%',
                    align: 'left',
                    data: ['刷卡次数'],
                    itemWidth: 14,
                    itemHeight: 14,
                    icon: 'rect',
                    itemGap: 20, //每条图例的距离
                    textStyle: {
                        color: '#ccc',
                        fontSize: 16,
                    },

                },
                {
                    orient: 'horizontal',
                    x: '93%',
                    y: '2%',
                    align: 'left',
                    data: ['违规次数'],
                    itemWidth: 14,
                    itemHeight: 14,
                    icon: 'rect',
                    itemGap: 20, //每条图例的距离
                    textStyle: {
                        color: '#ccc',
                        fontSize: 16,
                    },

                }],
            xAxis: {
                type: 'category',
                data: departmentCard.xData,
                axisLine: {
                    lineStyle: {
                        color: '#00E4FF',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#ccc',
                    fontSize: 16,
                    formatter: function (value, index) {
                        let values = value.length > 4 ? value.slice(0, 4) + '...' : value;
                        let num = index + 1;
                        let title = num >= 10 ? num : '0' + num;
                        let str = '{no|' + title + '.}' + values;

                        return str;
                    },
                    rich: {
                        no: {
                            color: '#ACEAF1',
                            fontSize: 16,
                        },
                    },
                    interval: 0,
                    rotate: 40,
                },
            },

            yAxis: [
                {
                    type: 'value',
                    nameTextStyle: {
                        color: '#ccc',
                        fontSize: 16,
                        align: 'left',
                        padding: 10,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#cdd5e2',
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(142, 227, 255, 0.3)',
                            type: 'solid',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 16,
                        color: '#ccc',
                    },
                },
                {
                    type: 'value',
                    nameTextStyle: {
                        align: 'center',
                        margin: 10,
                        padding: 10,
                        color: '#ccc',
                        fontSize: 16,
                    },
                    position: 'right',
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(142, 227, 255, 0.3)',
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        fontSize: 16,
                        color: '#ccc',
                    },
                },
            ],
            series: [
                {
                    name: '刷卡次数',
                    left: '0%',
                    type: 'bar',
                    barWidth: '16',

                    itemStyle: {
                        normal: {
                            color: '#0079FE',
                        },
                    },
                    data: departmentCard.yData[0],
                },
                {
                    name: '违规次数',
                    yAxisIndex: 1,
                    type: 'bar',
                    barWidth: '16',
                    itemStyle: {
                        normal: {
                            color: '#00E4FF',
                        },
                    },
                    data: departmentCard.yData[1],
                },
            ],
        };