echarts 饼图 图例在右侧时,文字在图例点右边

echarts图例在右侧时,文字在图例点右边

需求

echarts 饼图 图例在右侧时,文字在图例点右边_第1张图片

现在实现的

echarts 饼图 图例在右侧时,文字在图例点右边_第2张图片

实现需求

主要使用的参数:

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

你可能感兴趣的:(vue.js,echart,饼图,图例文字显示)