echarts name输出 显示总数和占比 不显示省略号设置显示长度

本文展示了如何在ECharts的series属性中配置itemStyle,用于设置饼图的样式,包括emphasis状态下的阴影效果。同时,详细解释了如何使用formatter函数自定义标签显示内容,以及调整X轴标签的rotate属性来实现倾斜效果。
摘要由CSDN通过智能技术生成

在series属性中添加itemStyle属性:

上代码  

series: [
          {
            name: "类型",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "现场服务-通行费争议" },
              { value: 735, name: "现场服务-特殊收费争议" },
              { value: 580, name: "稽核追缴-稽核追缴名单" },
              { value: 484, name: "其他服务-交管问题" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            // 输出形式  name : 总数 
              itemStyle:{
              normal:{
                label:{
                  show:true,
                  formatter:'{b}: {c} {d}%'
                }
              }
            }
          },
        ],

设置labal 下的 formatter 属性 为函数 return 输出 显示形式

formatter: function (value) {

if (value.length > 4) {

return `${value.slice(0, 4)}...`

}

return value;

}

X轴 name 倾斜 属性 rotate : 度数

 axisLabel: {
              show: true,
              color: "rgb(170,170,170)",
              fontSize: 7,
              rotate: 70,
            },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值