When the echarts pie chart legend is on the right, the text is on the right of the legend point

When the echarts legend is on the right, the text is on the right of the legend point

need

insert image description here

realized now

insert image description here

Realize requirements

Mainly used parameters:

legend.align = ’left‘

code:

can be used directly echartsin the example

option = {
    
    
    tooltip: {
    
    
        trigger: 'item'
    },
    legend: {
    
    
          orient: "vertical" /*标签文字垂直*/,
          left: "right" ,
          top: 'center',// 居中展示
          align: 'left',
          icon: 'rect',
          itemHeight: 21, //图例图标的高度
          itemWidth: 26, //图例图标的宽度
          textStyle: {
    
    
            //图例文字的样式
            color: "#fff",
            fontSize: 22,
          },
    },
    color: ["#E0E002", "#D4338C", "#FEB6B7", '#4EFEB3'],//自定义环形图颜色
    series: [
        {
    
    
            name: '',
            type: 'pie',
            radius: '50%',
           data: this.chartData,
            emphasis: {
    
    
                itemStyle: {
    
    
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
    
    
              normal: {
    
    
                show: true,
                textStyle: {
    
    
                  fontSize: 22,
                  fontWeight: 700
                },
                formatter: "{c}"
              },
            },
        }
    ]
};

Guess you like

Origin blog.csdn.net/Maxueyingying/article/details/132577454