echarts环形占比图 环形百分比

const pieConf = {
  title: {
    text: '40%',
    left: 'center',
    top: 61.5,
    textStyle:{
      color:'#1890fe'
    }
  },
  visualMap: {
    show: false,
  },
  series: [
    {
      type: 'pie',
      //环形显示饼状图,实际上显示的是50-80之间的部分
      //上限不建议设置为100,echarts自带动画效果,设置为100动画效果很丑
      radius: ['50%', '80%'],
      center: ['50%', '50%'],
      data: [   
      //itemSyle是单项的背景颜色设置。
        { value: 60, itemStyle: { color: '#f1f1f1' } },
        { value: 40, itemStyle: { color: '#1890fe' } },
      ],
      label: {
        //将视觉引导图关闭
        show: false,
      },
      itemStyle:{
      	//设置的是每项之间的留白
        borderWidth:7,
        borderColor:'#fff'
      },
      // 初始化echarts的动画效果
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]

原文链接: https://blog.youkuaiyun.com/qq_47246331/article/details/119598704

ECharts 中实现环形的圆角效果,主要通过配置 `series` 中的 `radius` 和 `roundCap` 属性来完成。具体来说,`roundCap` 用于设置环形两端的圆角样式,而 `radius` 则控制环形的大小和内外圆的半径比例。 ### 配置圆角环形 在 `series` 配置项中,将 `type` 设置为 `'pie'`,并使用 `roundCap: true` 来启用圆角效果。同时,通过 `radius` 指定内外圆的半径比例。例如,以下代码展示了如何实现圆角环形: ```javascript option = { series: [{ type: 'pie', radius: ['40%', '70%'], // 内圆和外圆的半径比例 roundCap: true, // 启用圆角效果 label: { show: false }, // 隐藏默认标签 data: [ { value: 33.5, name: 'A' }, { value: 31.5, name: 'B' }, { value: 27, name: 'C' }, { value: 10, name: 'D' } ], emphasis: { label: { show: true, formatter: function(params) { return "{name|" + params.name + "}" + "\n" + "{value|" + params.value + "}" }, textStyle: { rich: { name: { fontSize: 18, fontWeight: 'bold' }, value: { fontSize: 14 } } } } } }] }; ``` 上述代码中,`radius: ['40%', '70%']` 表示内圆半径为表容器的 40%,外圆半径为 70%。`roundCap: true` 用于开启环形两端的圆角效果,从而实现圆角环形的样式 [^1]。 ### 自定义中间区域样式 如果需要自定义环形中间的显示内容,例如显示总百分比或其他文本,可以在 `label` 配置中进行设置。通过 `formatter` 函数可以动态生成中间区域的文本内容,例如显示百分比或自定义格式的数据。以下是一个示例: ```javascript label: { show: true, position: 'center', formatter: '{text|总比}\n{percent|{d}%}', textStyle: { rich: { text: { fontSize: 14, color: '#666' }, percent: { fontSize: 24, color: '#333' } } } } ``` 该配置会在环形的中心区域显示总比信息,其中 `{d}%` 表示当前数据的百分比值 [^2]。 ### 数据处理建议 为了确保环形的正常显示,建议将数据总和归一化为 100,这样可以更直观地表示各部分的比。如果数据本身不是百分比形式,可以通过计算将其转换为百分比,例如: ```javascript const total = data.reduce((sum, item) => sum + item.value, 0); const formattedData = data.map(item => ({ ...item, percent: ((item.value / total) * 100).toFixed(2) })); ``` 这样可以确保环形的数据显示更加直观 。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值