Echarts 实现圆角环形图

 第一种方式:使用 bar 实现

想要的效果:

代码实现:

复制代码
    const chartData = {
      title: {
        text: '97', // 圆环中间数字
        textStyle: {
          color: '#222222',
          fontSize: 20,
        },
        subtext: '成功数',
        subtextStyle: {
          color: '#222222',
        },
        itemGap: 10,
        left: 'center',
        top: 'center',
      },
      angleAxis: {
        max: 100, // 总数
        clockwise: false, // 逆时针
        // 隐藏刻度线   
     axisLine: { show:
false, }, axisTick: { show: false, }, axisLabel: { show: false, }, splitLine: { show: false, }, }, radiusAxis: { type: 'category', // 隐藏刻度线 axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false, }, splitLine: { show: false, }, }, polar: { center: ['50%', '50%'], radius: '100%', // 图形大小 }, series: [ { type: 'bar', data: [ { name: '交易结果成功数', value: 97, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ // 渐变色,如果正常一个颜色的话,直接写 color:色值; { offset: 0, color: '#0091ff', }, { offset: 1, color: '#cfe8fc', }, ]), }, }, }, ], coordinateSystem: 'polar', roundCap: true, barWidth: 10, barGap: '-100%', z: 2, }, { // 底色环 type: 'bar', data: [ { value: 100, itemStyle: { color: '#cfe8fc', shadowColor: 'rgba(0, 0, 0, 0.2)', shadowBlur: 5, shadowOffsetY: 2, }, }, ], coordinateSystem: 'polar', roundCap: true, barWidth: 10, barGap: '-100%', z: 1, }, ], };
复制代码

 

posted @   Freya~  阅读(868)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示