echarts图例多个一排，对齐换行和横向柱状图y轴label左对齐

 1、图例对齐

 设置legend宽度和padding

 legend: {

     

      orient: 'horizontal',

      bottom: '0%',

      left: '0%',

      icon: 'diamond',

      itemWidth: 12,

      itemHeight: 12,

      itemGap: 10,

      width: '280rem',

      align: 'left',

      textStyle: {

        color: '#fff',

        rich: {

          a: {

            width: 20,

            // color: () => {},

            height: 38,

            padding: [

              0, // 上

              40, // 右

              0, // 下

              0, // 左

            ],

          },

        },

      },

      formatter: (e) => {

        return '{a| ' + e + '}{b|' + ' ' + '}';

      },

    },

export const placeConfig = {
  option: {
    grid: {
      top: '1%',
      left: '2%',
      right: '2%',
      bottom: '0',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}：{c}（{d}%）',
    },
    legend: {
      // show: true,
      orient: 'horizontal',
      bottom: '0%',
      left: '0%',
      icon: 'diamond',
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 10,
      width: '280px',
    
      align: 'left',
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            width: 20,
            // color: () => {},
            height: 38,
            padding: [
              0, // 上
              40, // 右
              0, // 下
              0, // 左
            ],
          },
        },
      },
      formatter: (e) => {
        return '{a| ' + e + '}{b|' + ' ' + '}';
        // return `${name}  ${((val / total) * 100).toFixed(2)}%`;
      },
    },
    labelLine: {
      lineStyle: {
        color: '#fff',
        wdith: 1,
      },
    },
    series: [
      {
        type: 'pie',
        radius: '54px',
        center: ['50%', '80px'],
        data: [],

        minAngle: 10,
        startAngle: 90,

        // alignTo: 'labelLine',
        label: {
          show: false,
          color: '#fff',
          overflow: 'none',
          formatter: (v) => {
            return `${v.data.rate}% \n ${v.data.name} `;
          },
        },
        labelLine: {
          show: true,
          // minTurnAngle: 270,
          // length: 10,
          // length2: 30,
        },
      },
    ],
  },
};

 

//饼图
export const pieConfig = {
  option: {
    grid: {
      top: '0',
      left: '3%',
      right: '3%',
      bottom: '0',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      // formatter: '{b}：{c}（{d}%）',
      formatter: '{b}：{c}',
    },
    legend: {
      top: 'center',
      left: '40%',
      orient: 'vertical',
      width: 480,
      height: 180,
      itemGap: 20,
      // icon: 'circle',
      textStyle: {
        color: 'rgba(235, 245, 255, 1)',
        width: 200,
        height: 20,
      },
    },
    series: [
      {
        type: 'pie',
        radius: '60%',
        center: ['20%', '50%'],
        data: [],
        label: {
          show: false,
        },
      },
    ],
  },
};

 

const [personPie, setPersonPie] = useState(pieConfig);


const numsResult = _.cloneDeep(personPie);
const codeDatas = [{name:'xxx',value:123}]
numsResult.option.series[0].radius = ['40%', '70%'];
      // numsResult.option.legend.icon = 'rect';
      numsResult.option.legend.width = 20;
      numsResult.option.legend.itemHeight = 0;
      numsResult.option.legend.itemWidth = 0;
      numsResult.option.legend.borderRadius = 0;
      numsResult.option.series[0].data = codeDatas;
      numsResult.option.legend.formatter = (e) => {
        let data = codeDatas;
        let value = 0;
        let name = '';
        data.forEach((el) => {
          if (e == el.name) {
            name = el.name;
            value = el.value;
          }
        });
        let title = name;
        if (title.length > 30) {
          return ['{a|}' + '{b|' + title.substr(0, 15) + '...' + ': ' + value + '个' + '}'].join(
            '\n',
          );
        } else {
          return ['{a|}' + '{b|' + title + ': ' + value + '个' + '}'].join('\n');
        }
      };
      numsResult.option.legend.textStyle = {
        //rich放在textStyle里面
        // color: '#fff',

        rich: {
          a: {
            width: 39,
            height: 14,
            lineHeight: 15,
            backgroundColor: [],
            borderRadius: 6,
          },
          b: {
            lineHeight: 15,
            borderRadius: 15,
            padding: [0, 0, 0, 5],
          },
          c: {
            lineHeight: 15,
            borderRadius: 15,
            padding: [0, 0, 0, 5],
          },
        },
      };

 

 2、y轴label对齐

 

设置grid左边位置和label的宽度和边距，每个宽度的图表不一样数据长度不一样这些值都不一样，自己调试

grid: {
      top: '1%',
      left: '-100px',
      right: '5%',
      bottom: '5%',
      containLabel: true,
    }, 

yAxis: {
      type: 'category',
      axisLabel: {
        show: true,
        overflow: 'truncate',
        color: '#fff',
        width: 150,//label宽度
        margin: 120,//距离y轴的位置
        align: 'left',
      },
   
    },

//当日
export const todaybarChartConfig = {
  option: {
    grid: {
      top: '1%',
      left: '-100px',
      right: '5%',
      bottom: '5%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    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,
      },
      axisLabel: {
        show: true,
        overflow: 'truncate',
        color: '#fff',
        width: 150,
        margin: 120,
        align: 'left',
      },
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      data: [],
    },
    xAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#fff',
        },
        nameTextStyle: {
          color: '#fff',
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: 'bar',
        barMaxWidth: '8px',
        label: {
          show: true,
          position: 'right',
          color: '#fff',
        },
        itemStyle: {
          normal: {
            borderRadius: 10,//
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgba(0, 149, 255, 1)',
              },
              {
                offset: 1,
                color: 'rgba(55, 255, 253, 1)',
              },
            ]),
          },
        },
        data: [],
      },
    ],
  },
};