echarts 円グラフの凡例が右側にある場合、テキストは凡例ポイントの右側にあります

echarts の凡例が右側にある場合、テキストは凡例ポイントの右側にあります

必要

ここに画像の説明を挿入

今気づいた

ここに画像の説明を挿入

要件を実現する

主に使用されるパラメータ:

legend.align = ’left‘

コード:

echarts例で直接使用できます

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}"
              },
            },
        }
    ]
};

おすすめ

転載: blog.csdn.net/Maxueyingying/article/details/132577454