ECharts-极坐标实现闭合的面积图

最终效果图如下
在这里插入图片描述

option = {
    angleAxis: {
        type: 'category',
        // boundaryGap: false, 如果打开这个属性效果如下
        data: ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"]
    },
    radiusAxis: {
    },
    polar: {
    },
    series: [{
        type: 'line',
        //这里data里面的数据要多一位,,也就是将第一位复制了拼接在后面
        data: [13.3, 6.2, 3.9, 3.2, 3.9, 3.8, 4.2, 9.4, 9, 3.5, 1.4, 0.8, 1.1, 2.6, 10.7, 19.4,13.3],
         coordinateSystem: 'polar',
         lineStyle: {
                 normal: {
                     color: '#0076c8'
                        }
                  },
                areaStyle: {
                    color: '#0076c8',
                    origin: 'auto'
                        }
    }],
    legend: {
        show: true,
        data: ['A', 'B', 'C']
    }
};

在这里插入图片描述
如果series里面有多个数据在追后一位添加和第一位一样的那么数据将会叠加例如下面
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现echarts中的极坐标环形柱状,可以使用Polar(极坐标)和Bar(柱状)组件。首先,在Bar组件中设置type为'bar',然后在data中设置单项数据的name和value。在coordinateSystem中将坐标系设置为'polar',表示使用极坐标系。为了实现环形效果,可以设置roundCap为true,表示在环形柱条两侧使用圆弧效果。另外,通过设置barWidth来控制柱状的宽度,可以使用较大的值使柱状成环状。为了使两个环形柱状重叠,可以将barGap设置为'-100%'。最后,通过设置z来调整柱状的层级。 另外,为了实现极坐标系的径向轴,可以在radiusAxis中设置type为'category',表示使用类别类型的轴。这样就可以在极坐标系中显示环形柱状了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Echarts案例:使用极坐标加柱状实现类似Apple Watch上的运动环形效果](https://blog.csdn.net/time_____/article/details/104994693)[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_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [echarts 极坐标实现【环形】柱状](https://blog.csdn.net/qq_36437172/article/details/106131620)[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_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值