关于Echarts环的定制-阿里云开发者社区

开发者社区> 开发与运维> 正文

关于Echarts环的定制

简介: 用Echarts实现环,并在环内显示百分数

设计图

image

这是设计师PS的样图,要让我们前端实现。上面的倒是用grid、flex或者百分比就可以实现,至于下面的,在Echarts上有很多像这样的饼图改造的,但就是不是这样子的,所以开启了定制之旅;不知道怎么回事,我在Echarts的编辑器里定制出了这样的样式,但是就是在项目里显示错误。
image
这个配置在项目里就错位了,图已不再就不奉上了。
接下来实现设计师的宏伟蓝图。直接上代码。

coding

            // 要显示的标注样式
            let Label = {
                show: true,
                position: 'center',
                formatter: function(param) {
                    return param.percent.toFixed(0)+ "%"; // 将显示内容处理成整百分数
                },
                textStyle: {
                    fontSize: '25',
                    fontWeight: 'bold'
                }
            };  
            // 不显示的标注样式
            let disLabel = {
                show: false,
            };
            let overviewOption = {
                color: ['#f1a252', '#ccc'],
                series: [{
                    type: 'pie',
                    radius: ['70%', '80%'], // 环的内外半径
                    labelLine: {
                        show: false // 取消显示文字和环之间的牵引线
                    },
                    hoverAnimation:false, // 移除鼠标hover动画
                    legendHoverLink:false, // 移除鼠标与图例之间的交互
                    data: [
                        {value: 53,name: '用水量',label: Label}, // 要为每个数据进行定制文字
                        {value: 77,name: '未使用', label: disLabel}
                    ]
                }]
            };

效果

image

总结

Echarts的定制性非常高,效果出不来需要不断的调试。don't give up!!!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章