【Echarts】极坐标系下的柱状图实现圆角环状进度条

最新推荐文章于 2024-06-27 10:31:04 发布

且陶陶º

最新推荐文章于 2024-06-27 10:31:04 发布

阅读量884

点赞数 2

分类专栏：可视化图形文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41675812/article/details/129324162

版权

可视化图形专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该文章介绍了一种利用ECharts的柱状图在极坐标系中实现圆角环状图的方法。代码示例中，通过设置max、clockwise、barWidth、barGap和roundCap属性，以及使用颜色渐变和阴影效果，创建了一个具有88%市场占比的圆角环状图。

摘要由CSDN通过智能技术生成

用普通的环状图无法实现圆角，需要使用柱状图的极坐标系，代码如下：

var option = {
        title: {
          text: '88%',
          textStyle: {
            color: '#333',
            fontSize: 16,
          },

          subtext: '市场占比',
          subtextStyle: {
            color: '#333',
            fontSize: 16,
          },
          //   itemGap: 10, // 主副标题距离
          left: '45%',
          top: '27%',
        },
        legend: {},
        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%', '30%'],
          radius: ['30%', '70%'], //图形大小
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                name: '市场占比',
                value: 88,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#94d0ca',
                      },

                      {
                        offset: 1,
                        color: '#3198ee',
                      },
                    ]),
                  },
                },
              },
            ],
            coordinateSystem: 'polar', // 变成极坐标系
            roundCap: true, // 两端变成 圆角
            barWidth: 20, // 柱子粗细
            barGap: '-100%', // 两环重叠
            z: 99, // 有数值的环置顶
          },
          {
            // 灰色环
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#E9F5FF',
                  shadowColor: 'rgba(1, 0, 0, 0.2)',
                  shadowBlur: 5,
                  shadowOffsetY: 2,
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 20,
            barGap: '-100%', // 两环重叠
          },
        ],
      }