Echart饼图-圆形图修改重新绘制

首先看看默认效果：

代码如下：

option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: '访问来源',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 1048, name: '搜索引擎'},{value: 735, name: '直接访问'},{value: 580, name: '邮件营销'},{value: 484, name: '联盟广告'},{value: 300, name: '视频广告'}]}]
};

修改后第一种显示对饼图中间数字进行汇总而非每次选择每个项后展示该项名称，对鼠标移入做详细展示拆分，效果如图：

代码如下：

option = {tooltip: {trigger: 'item',formatter: '{b} <br/>占比： {d}% <br/>金额：￥{c}'},legend: {top: '5%',left: 'center'},series: [{name: '',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {normal: {show: true,position: 'center',color:'#4c4a4a',formatter: '营收总额' + '\n\r' +'{total|' + 5656 +'}', rich: { total:{ fontSize: 35, fontFamily : "微软雅黑",color:'#454c5c' },active: { fontFamily : "微软雅黑", fontSize: 16, color:'#6c7a89', lineHeight:30} } },emphasis: {show: true }},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 1048, name: '搜索引擎'},{value: 735, name: '直接访问'},{value: 580, name: '邮件营销'},{value: 484, name: '联盟广告'},{value: 300, name: '视频广告'}]}]
};

第二种改造，对原来的数据结构进行修改，增加显示多项。效果如图：

代码如下：

option = {tooltip: {trigger: 'item',// formatter: '{b0} <br/> {c} ({d}%)'formatter: function(params) {var res = params.name+'<br/>';var myseries = option.series;for (var i = 0; i < myseries.length; i++) {for(var j=0;j<myseries[i].data.length;j++){console.log(myseries[i])if(myseries[i].data[j].name==params.name){res+=' 总额： '+myseries[i].data[j].value+'</br>';res+=' 占比： '+myseries[i].data[j].radio+'</br>';res+=' 订单量： '+myseries[i].data[j].count+'</br>';}}}return res;}},legend: {top: '5%',left: 'center'},series: [{name: '',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {normal: {show: true,position: 'center',color:'#4c4a4a',formatter: '营收总额' + '\n\r' +'{total|' + 5656 +'}', rich: { total:{ fontSize: 35, fontFamily : "微软雅黑",color:'#454c5c' },active: { fontFamily : "微软雅黑", fontSize: 16, color:'#6c7a89', lineHeight:30} } },emphasis: {show: true }},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 1048, name: '搜索引擎',count:200,radio:'20%'},{value: 735, name: '直接访问',count:210,radio:'25%'},{value: 580, name: '邮件营销',count:220,radio:'26%'},{value: 484, name: '联盟广告',count:230,radio:'27%'},{value: 300, name: '视频广告',count:240,radio:'29%'}]}]
};

以上代码是针对Echart饼图-圆形图修改，根据业务使用改造的，记录以便日后使用。

Echart饼图-圆形图修改重新绘制相关推荐

tableau高级绘图（十一）-tableau绘制日历圆形图
前言日历圆形图的形式非常适合用于展现一年12个月的相关数据,能清晰体现月份的分布,单点数值的大小. 请看最终效果图: 数据准备我们可以使用 Tableau 自带的 Sample Superstor ...
ppt怎么做流程图饼图_环形流程图如何绘制？5分钟让你精通绘制技巧
环形流程图如何绘制?环形图是由两个及两个以上大小不一的饼图叠在一起,挖去中间所相交的部分所构成的图形.简单的饼图只能表现一个总数据所占的百分比,从多方面展示既不经济也不便利,而环形图恰恰相反,对于多方 ...
r语言绘制精美pcoa图_R语言绘制交互式热图
热图通过热图可以简单地聚合大量数据,并使用一种渐进的色带来优雅地表现,最终效果一般优于离散点的直接显示,可以很直观地展现空间数据的疏密程度或频率高低.但也由于很直观,热图在数据表现的准确性并不能保证 ...
关于echart 饼图显示不出来挖坑总结
关于echart 饼图显示不出来挖坑总结近来公司的移动端app,作业页面,从后台接口返回的是:老师布置一次作业的所有题目信息,在app页面除了展示题目信息之外,还需要统计A\B\C\D,正确\错误 ...
学计算机的思维导图,用计算机绘制思维导图的几大优势
相信很多人绘制思维导图还是用彩笔和白纸来完成的,但如今已经是一个信息科技化的时代,我们不妨学习使用计算机来绘制思维导图,可以预见,未来的思维导图必定会由传统的手绘转变为智能化.自动化的计算机绘图时代. ...
pyecharts画饼形图,圆形图,环形图(含百分比显示)【python干货】
很多做数据分析可视化的朋友总会遇到一些烦恼,用pyecharts绘制饼形图(圆形图)的时候,总会报错. 废话不多说,下面跟着小编上车吧,教你用pyecharts绘制饼形图(圆形图),环形图从小白到精通 ...
利用Origin绘制等高线颜色填充图：初步绘制与细化
利用Origin绘制梯度填充图:初步绘制与细化前言一."等高线-颜色填充"图的初步绘制 1.数据表准备 1.1 新建工作簿 1.2 数据导入 2.绘制"等高线-颜色填 ...
Android中圆形图的几种实现方式
在Android开发中,圆形图片是很常见的,例如淘宝的宝贝,QQ的联系人头像等都是圆形的图片, 但是Android原生的ImageView又不能显示圆形的图片,这就需要我们自己去实现一个圆形图了一. ...
【无机纳米材料科研制图——OriginLab 0201】Origin光谱图、曲线图绘制
现在给大家带来第二个软件,Origin,是一个非常好用的数据绘图软件. OriginLab官网地址. [无机纳米材料科研制图--OriginLab 0201]Origin光谱图.曲线图绘制 [无机纳米 ...

Echart饼图-圆形图修改重新绘制

Echart饼图-圆形图修改重新绘制相关推荐

最新文章

热门文章