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

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要自定义echarts饼图图例,可以按照以下步骤进行操作: 1. 在option中添加legend对象,设置图例的相关属性。例如,可以设置图例的布局方式(水平或垂直)、是否添加滚动页码、图例的位置、图例的图标样式、图例的字体样式等。示例代码如下: ``` legend: { orient: "vertical", //图例的布局,水平布局、垂直布局 type: 'scroll', //是否添加滚动页码 data: count, //图例的数据,可以是一个数组或对象 right: 15, //图例距离容器右侧的距离 top: 'middle', //图例距离容器顶部的距离 icon: 'circle', //图例的图标样式 itemWidth: 8, //图例的宽度 itemHeight: 8, //图例的高度 textStyle: { //图例字体样式 color: "#000", //字体颜色 fontSize: 14, //字体大小 fontFamily: "微软雅黑" //字体样式 } } ``` 通过以上步骤,您可以自定义echarts饼图图例,根据需要设置相关属性,使图例符合您的要求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [echarts饼图图例自定义、数值直观显示、标题位置](https://blog.csdn.net/wyl164778/article/details/118999300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [解决echarts饼图标签重叠的问题](https://download.csdn.net/download/weixin_38554186/13711299)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值