php echarts 嵌套饼图,echarts绘制嵌套环形图/ 双饼图
设备类型在里 设备品牌在外
后台返回数据如下格式:
device_brand_distribution = [{'equipment_type': '智能手机', 'equipment_brand': 'xiaomi',
'equipment_output': '20.0%', 'equipment_type_number': 300,
'equipment_brand_number': 200},
{'equipment_type': '智能手机', 'equipment_brand': 'huawei',
'equipment_output': '10.0%', 'equipment_type_number': 300,
'equipment_brand_number': 100},
{'equipment_type': 'desktop', 'equipment_brand': '联想',
'equipment_output': '70.0%',
'equipment_type_number': 700,
'equipment_brand_number': 700}]
HTML如下:
访问设备品牌分布
js代码如下:
发送ajax请求 请求成功后 在success里{
var brand_distribution = result.device_brand_distribution;//设备品牌分布
var typeData = fnPiedata2(brand_distribution,'equipment_type','equipment_type_number');//name,value,百分比,类型
var bransData = fnPiedata2(brand_distribution,'equipment_brand','equipment_brand_number');//name,value,百分比,类型
var data=fnPiedata3(brand_distribution,'equipment_type','equipment_brand','equipment_output');
fnEquipmentbrand2('equipmentbrand',data,typeData,'设备品牌分布图',bransData);
}
/*双饼图数据格式转换*/
// fnPiedata2处理内部 设备类型的数据 name是设备类型 value是对应的数值
function fnPiedata2(dt,name,value){
var arr = [];
var namrArr=[];
for(var i=0;i');
otr.html(''+dt[j].type+''+dt[j].brand+''+dt[j].percent+'')
$('.brandDistribution').append(otr);
}
// 图片左侧对应的小提示
var arrname = [];
for(var i=0;i{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical', //图片左侧对应的小提示 垂直分布
x: 'left', //图片左侧对应的小提示 靠着左侧分布
data:arrname // 图片左侧对应的小提示d的数据来源
},
color:['#ef7837','#00a9cd','#fec35d','#00ac99','#13a666','#655bc7','#ba62e3','#e773d5','#c0a548','#3b7ec3','#71d2e0','#8ee071','#dce071','#3e4ddd','#278fe0'],
series: [
{
name:name,
type:'pie',
selectedMode: 'single',
radius: [0, '60%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false //内层饼图的箭头指示线和指示框 不显示
}
},
data:typeDate // 内层饼图的数据来源
},
{
name:'访问来源',
type:'pie',
radius: ['50%', '65%'],
label: {
normal: {
show:false // 外层饼图的箭头指示线和指示框 不显示
}
},
data:brandData // 外层饼图的数据来源
}
]
};
myChart.setOption(option);
}
php echarts 嵌套饼图,echarts绘制嵌套环形图/ 双饼图相关推荐
- java使用poi导出ppt图表——环形图/空心饼图
目录 前言 使用java poi导出图表,就是找不到环形图/空心饼图怎么做的(或者是我没找到),找到的都是饼图,柱图,线图等. 所以就简单说一下怎么导出的. 一.导入poi相关jar包 二.先创建ex ...
- echarts仿支付宝芝麻信用分环形图
效果图 配置 // 支付宝芝麻信用环形图const options = {graphic: [ //为环形图中间添加文字{type: "text",left: "cent ...
- echart图表环形图(饼图)
最近由于项目需要接触了echart图表插件,由于echart表格配置项比较多,因此整理了自己遇到的一些图表并且粘贴出代码,echarts官网API http://echarts.baidu.com/o ...
- tableau可视化函数使用案例(六十七)-Tableau饼图及其变种(环形图、南丁格尔玫瑰图、旭日图)
01 基本饼图 饼图常用于表达多个子类的占比,通过观察饼图扇形角度的大小,可快速对比各子类间的相对关系.在Tableau中,制作饼图比较方便,仅需依次将类别和相应度量信息拖动到标记区的颜色和大小即可. ...
- html 环形图圆角,canvas绘制圆角环形图
前言 之前一篇文章,写过关于canvas绘制百分比的环形图,以及进度条模糊的解决方案,今天项目中用到了圆角环形图,查了一下百度echart,发现并没有圆角环形图,highchart的圆角环形图和项目中 ...
- 使用pycharm开发Django2.2全过程(九)-ECharts的使用(绘制地图、散点图、饼图等)
ECharts是一个第三方控件,我们使用前,需要先下载对应的js文件才能用,链接:https://pan.baidu.com/s/1Fe1LRoN_t7WjfS0njER9hA?pwd=r56g 提取 ...
- 嵌套饼图_你真的了解matplotlib吗?---环形图
环形图简介 环形图是饼图衍生出来的统计图形,可以看作是两个以上饼图的叠合.环形图与饼图类似,其实是有差别的.饼图是用圆形及圆内扇形的面积来表示数值大小的图形,主要用于表示总体中各组成部分所占的比例.与 ...
- vue项目中使用echarts完成图表类的开发之饼图,环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
- python绘制饼图双层_有趣!如何用Python-matplotlib绘制双层饼图及环形图?
(1) 饼图(pie),即在一个圆圈内分成几块,显示不同数据系列的占比大小,这也是我们在日常数据的图形展示中最常用的图形之一. 在python中常用matplotlib的pie来绘制,基本命令如下所示 ...
最新文章
- CVS/SVN 托管服务
- libsvm java api文档_libsvm-javaAPI
- 40种Lightbox效果收集
- unity3d 的Quaternion.identity和transform.rotation区别是什么
- ebs java并发_EBS中Java并发程序笔记(1)
- 这些年我对微服务的理解
- 为什么苹果不再需要谷歌地图?
- 「技术人生」第3篇:解决问题的规律总结
- Js中动态追加代码后,之前定义的Js不再起作用
- java栈顶元素_栈(Stack)
- 深入理解Linux/Unix文件描述符和epoll
- 1、使用xcode9创建swift语言的第一个程序hello world
- 渗透测试:初识Kali之Kali系统安装及基本配置
- 新浪微博生成超短链接
- 反汇编工具OD(OllyDebug)
- Android完美解决监听home键
- win7记事本如何转换html,Win7系统打开记事本文本文档出现乱码如何解决?
- oracle 统计同比 环比,oracle求同比,环比函数(LAG与LEAD)的详解
- 自动控制原理之如何理解梅森公式(内附MATLAB求解传递函数程序)
- 力天创见Brickstream排队客流统计
热门文章
- nginx另类复杂的架构
- Skype for Business支持离线消息啦
- 【NOIP2018普及组】龙虎斗
- imp报IMP-00010,IMP-00013错误
- 手机怎么把两寸照改成一寸照?这个方法既简单又好用
- fatal: unable to connect to gitee.com: gitee.com[0: 180.97.125.228]: errno=Unknown error
- 智慧交通:地铁站 3D 可视化,车路协同赋能科学出行
- php date 加月_php如何使时间增加一个月
- sas中数据输入输出格式
- 深圳市专精特新中小企业认定补贴政策及申报条件重点,补贴20-100万