之前写了一个饼图，使用的是echarts，结果今天出现了一个问题：

当数据比例超过100%时，出现了如上的效果。。。

好尴尬。。。

正常情况下是可以的，但是当比例超过100%时，就出现了最开始的效果图。。。

我的写法是这样的：

var chartDom = document.getElementById(cIndex + '_Id');
var myChart = echarts.init(chartDom);
var option;
option = {tooltip: {show: false,},color: ['#ff9900', '#E1E1E1'],series: [{name: c.CategoryName + '成交额占比',type: 'pie',radius: ['50%', '80%'],avoidLabelOverlap: false,label: {normal: {show: true,position: 'center',color: '#FF9900',fontSize: 12,fontWeight: 'bold',formatter: (value) => {if (value.data.name == '成交额') {return value.data.value + '%';} else {return '';}}}},emphasis: {label: {show: false,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: c.Rate, name: '成交额' },{ value: 100 - c.Rate, name: '目标额' },]}]
};
option && myChart.setOption(option);

上面的代码出现错误效果图的主要原因就是数据重叠了。主要看data的部分。当c-Rate的参数超过100时，就会出现这样的问题了。因此我将data部分改为下面的方式就解决了这个问题。

data: [{ value: c.Rate, name: '成交额' },{ value: 100 - c.Rate>0?(100-c.Rate):0, name: '目标额' },
]

下面将饼图封装成一个函数，方便多次调用。

饼图函数的封装

function circle(dataSeries,dataRate,color) {var circleToption = {series: [{name: '成单率',type: 'pie',radius: ['55%', '75%'],center: ['40%', '40%'],avoidLabelOverlap: false,itemStyle: {normal: {color: function (params) {// build a color map as your need.var colorList = color;return colorList[params.dataIndex]},shadowBlur: 2,shadowColor: 'rgba(255,227,42,0.3)',shadowOffsetX: 0,shadowOffsetY: 0,}},label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.normal: {shadowBlur: 10,shadowColor: 'rgba(255,227,42,0.2)',shadowOffsetX: 0,shadowOffsetY: 0,show: true,             // 是否显示标签[ default: false ]position: 'center',formatter: function (argument) {var html;html = '成单率\n' + (dataRate*100).toFixed(2) + '%';return html;},textStyle: {fontSize: 10,color: '#fff'},}},labelLine: {show: false},data: dataSeries,//    [//    { value: 129, name: '成单' },//    { value: 330 - 129, name: '未成单' },//]}]};return circleToption;
}

使用方法：

var dataSeries = [{value:121,name:'成单'},{value:13,name:'未成单'}
]
var color = ['#ff9900','#666666'];
var dataRate = 12;
circle(monthData,dataRate,monthColor);

完成！！！

饼图出现超过100%的比例——基础积累相关推荐

office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...
刘强东给高管兄弟降薪：2千多位总监工资打8折！同时拿出100亿保障基础员工住房
杨净羿阁发自凹非寺量子位 | 公众号 QbitAI 京东刘强东,一封全员内部信迅速火上热搜. 一是给2000多位高管兄弟降薪:京东副总监以上级别全体高管,降薪10%-20%不等.而且职位越高降 ...
刘强东给高管兄弟降薪！同时拿出100亿保障基础员工住房
杨净羿阁发自凹非寺量子位 | 公众号 QbitAI 京东刘强东,一封全员内部信迅速火上热搜. 一是给2000多位高管兄弟降薪:京东副总监以上级别全体高管,降薪10%-20%不等.而且职位越高降 ...
北大计算机技术报录比,北大报录比超过100%的专业一览
报考秘笈:百分百读北大 ----北大报录取比例超过100%的专业同比分析作者:杨晗北京大学2008年共有219个硕士专业对外招生,除13个专业仅招收推荐免试生之外,共有206个专业对全国统考生开放 ...
python入门经典100题-零基础学习Python开发练习100题实例（1）
零基础学习Python开发练习100题实例(1) 2018-02-25 09:37:59 2854浏览 1.题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序 ...
普陀区科技创新型小巨人企业奖励不超过100万元
普陀区科技创新型小巨人企业一.主管部门普陀区科学技术委员会二.政策依据 <普陀区支持科技创新实施意见>(普科合规[2021]2号) <关于开展2022年度普陀区科技创新型小巨人 ...
富文本编辑器——UEditor的使用——基础积累
富文本编辑器--UEditor的使用--基础积累之前在做后台管理系统时,遇到了一个富文本编辑器的功能,用于新闻内容的编辑. 话不多说,直接上效果图: 全屏的效果及对应的功能菜单如下: 上面的菜单已经 ...
普陀区科技创新型小巨人企业给予不超过100万元资金扶持
普陀区科技创新型小巨人企业认定一.主管部门普陀区科学技术委员会二.政策依据 <普陀区支持科技创新实施意见>(普科合规[2021]2号) <关于开展2022年度普陀区科技创新型小 ...
开源自制的6通道航模遥控器(一) 超简单不超过100行代码
前言前段时间跟着LOLI大神的教程制作了LOLI三代控,效果很好.但是,由于LOLI三代控的接收机带有数据回传功能,也就是接收机的无线模块也承担了发射数据功能,所以接收机也要使用带有功率放大芯片的N ...
【基础积累】目标检测NMS—精度提升篇
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要10分钟 Follow小博主,每天更新前沿干货作者:曲終人不散丶知乎链接:https://zhuanlan.zhihu.com/p/151 ...

饼图出现超过100%的比例——基础积累

饼图函数的封装

饼图出现超过100%的比例——基础积累相关推荐

最新文章

热门文章