关于Echarts环的定制

设计图

这是设计师PS的样图，要让我们前端实现。上面的倒是用grid、flex或者百分比就可以实现，至于下面的，在Echarts上有很多像这样的饼图改造的，但就是不是这样子的，所以开启了定制之旅；不知道怎么回事，我在Echarts的编辑器里定制出了这样的样式，但是就是在项目里显示错误。

这个配置在项目里就错位了，图已不再就不奉上了。
接下来实现设计师的宏伟蓝图。直接上代码。

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}
                    ]
                }]
            };

效果

总结

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