如何用echarts生成每日考勤工时成本分析图表 |
您所在的位置：网站首页 › 考勤表图表 › 如何用echarts生成每日考勤工时成本分析图表 |
如何用echarts生成每日考勤工时成本分析图表
|
最近参与开发考勤管理系统，里面有各种统计分析图表，可以用的图表组件也选了很多，有highcharts, echarts, 因为学习成本和文档阅读便利性，所以最终选择了echart做为图表组件，记录一下学习，下面是图表效果 echarts.js文件可在echarts的官方中文网站下载 然后配置echarts图表选项 { baseOption: { timeline: { // y: 0, axisType: 'category', // realtime: false, // loop: false, autoPlay: false, // currentIndex: 2, playInterval: 1000, bottom: 10, // controlStyle: { // position: 'left' // }, data: [ '2002年','2003年','2004年', { value: '2005年', tooltip: { formatter: '{b} 工时成本达到一个高度' }, symbol: 'diamond', symbolSize: 16 }, '2006年', '2007年','2008年','2009年','2010年', { value: '2011年', tooltip: { formatter: function (params) { return params.name + '工时成本达到又一个高度'; } }, symbol: 'diamond', symbolSize: 18 }, ], label: { formatter : function(s) { return (new Date(s)).getFullYear(); } } }, title: { subtext: '数据来自天时考勤系统www.daytime.cc' }, tooltip: { }, legend: { x: 'right', data: ['Q1季度', 'Q2季度', 'Q3季度', 'Q4季度', '加班工时'], selected: { '加班工时': false } }, calculable : true, grid: { top: 90, bottom: 110, right: 20, left: 70, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', label: { show: true, formatter: function (params) { return params.value.replace('\n', ''); } } } } }, xAxis: [ { 'type':'category', 'axisLabel':{'interval':0}, 'data':[ '行政','\n人事','IT','\n研发','生产','\n后勤','商务','\n市场', '设计','\n业务A','业务B','\n总经办','测试','\n财务','车间','\n招商', '海外','\n管理','商品','\n直营','信息','\n企划','仓库','\n买手', '代理','\n渠道','采购','\n开发','储备','\n门店','电商' ], splitLine: {show: false} } ], yAxis: [ { type: 'value', name: '工时（小时）' } ], series: [ {name: 'Q1季度', type: 'bar'}, {name: 'Q2季度', type: 'bar'}, {name: 'Q3季度', type: 'bar'}, {name: 'Q4季度', type: 'bar'}, {name: '加班工时', type: 'bar'}, { name: '工时占比', type: 'pie', center: ['75%', '35%'], radius: '28%', z: 100 } ] }, options: [ { title: {text: '2002工时成本分析'}, series: [ {data: dataMap.dataGDP['2002']}, {data: dataMap.dataFinancial['2002']}, {data: dataMap.dataEstate['2002']}, {data: dataMap.dataPI['2002']}, {data: dataMap.dataSI['2002']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2002sum']}, {name: 'Q2季度', value: dataMap.dataSI['2002sum']}, {name: 'Q3季度', value: dataMap.dataTI['2002sum']}, {name: 'Q4季度', value: dataMap.dataTI['2002sum']} ]} ] }, { title : {text: '2003工时成本分析'}, series : [ {data: dataMap.dataGDP['2003']}, {data: dataMap.dataFinancial['2003']}, {data: dataMap.dataEstate['2003']}, {data: dataMap.dataPI['2003']}, {data: dataMap.dataSI['2003']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2003sum']}, {name: 'Q2季度', value: dataMap.dataSI['2003sum']}, {name: 'Q3季度', value: dataMap.dataTI['2003sum']}, {name: 'Q4季度', value: dataMap.dataTI['2003sum']} ]} ] }, { title : {text: '2004工时成本分析'}, series : [ {data: dataMap.dataGDP['2004']}, {data: dataMap.dataFinancial['2004']}, {data: dataMap.dataEstate['2004']}, {data: dataMap.dataPI['2004']}, {data: dataMap.dataSI['2004']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2004sum']}, {name: 'Q2季度', value: dataMap.dataSI['2004sum']}, {name: 'Q3季度', value: dataMap.dataTI['2004sum']}, {name: 'Q4季度', value: dataMap.dataTI['2004sum']} ]} ] }, { title : {text: '2005工时成本分析'}, series : [ {data: dataMap.dataGDP['2005']}, {data: dataMap.dataFinancial['2005']}, {data: dataMap.dataEstate['2005']}, {data: dataMap.dataPI['2005']}, {data: dataMap.dataSI['2005']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2005sum']}, {name: 'Q2季度', value: dataMap.dataSI['2005sum']}, {name: 'Q3季度', value: dataMap.dataTI['2005sum']}, {name: 'Q4季度', value: dataMap.dataTI['2005sum']} ]} ] }, { title : {text: '2006工时成本分析'}, series : [ {data: dataMap.dataGDP['2006']}, {data: dataMap.dataFinancial['2006']}, {data: dataMap.dataEstate['2006']}, {data: dataMap.dataPI['2006']}, {data: dataMap.dataSI['2006']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2006sum']}, {name: 'Q2季度', value: dataMap.dataSI['2006sum']}, {name: 'Q3季度', value: dataMap.dataTI['2006sum']}, {name: 'Q4季度', value: dataMap.dataTI['2006sum']} ]} ] }, { title : {text: '2007工时成本分析'}, series : [ {data: dataMap.dataGDP['2007']}, {data: dataMap.dataFinancial['2007']}, {data: dataMap.dataEstate['2007']}, {data: dataMap.dataPI['2007']}, {data: dataMap.dataSI['2007']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2007sum']}, {name: 'Q2季度', value: dataMap.dataSI['2007sum']}, {name: 'Q3季度', value: dataMap.dataTI['2007sum']}, {name: 'Q4季度', value: dataMap.dataTI['2007sum']} ]} ] }, { title : {text: '2008工时成本分析'}, series : [ {data: dataMap.dataGDP['2008']}, {data: dataMap.dataFinancial['2008']}, {data: dataMap.dataEstate['2008']}, {data: dataMap.dataPI['2008']}, {data: dataMap.dataSI['2008']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2008sum']}, {name: 'Q2季度', value: dataMap.dataSI['2008sum']}, {name: 'Q3季度', value: dataMap.dataTI['2008sum']}, {name: 'Q4季度', value: dataMap.dataTI['2008sum']} ]} ] }, { title : {text: '2009工时成本分析'}, series : [ {data: dataMap.dataGDP['2009']}, {data: dataMap.dataFinancial['2009']}, {data: dataMap.dataEstate['2009']}, {data: dataMap.dataPI['2009']}, {data: dataMap.dataSI['2009']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2009sum']}, {name: 'Q2季度', value: dataMap.dataSI['2009sum']}, {name: 'Q3季度', value: dataMap.dataTI['2009sum']}, {name: 'Q4季度', value: dataMap.dataTI['2009sum']} ]} ] }, { title : {text: '2010工时成本分析'}, series : [ {data: dataMap.dataGDP['2010']}, {data: dataMap.dataFinancial['2010']}, {data: dataMap.dataEstate['2010']}, {data: dataMap.dataPI['2010']}, {data: dataMap.dataSI['2010']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2010sum']}, {name: 'Q2季度', value: dataMap.dataSI['2010sum']}, {name: 'Q3季度', value: dataMap.dataTI['2010sum']}, {name: 'Q4季度', value: dataMap.dataTI['2010sum']} ]} ] }, { title : {text: '2011工时成本分析'}, series : [ {data: dataMap.dataGDP['2011']}, {data: dataMap.dataFinancial['2011']}, {data: dataMap.dataEstate['2011']}, {data: dataMap.dataPI['2011']}, {data: dataMap.dataSI['2011']}, {data: [ {name: 'Q1季度', value: dataMap.dataPI['2011sum']}, {name: 'Q2季度', value: dataMap.dataSI['2011sum']}, {name: 'Q3季度', value: dataMap.dataTI['2011sum']}, {name: 'Q4季度', value: dataMap.dataTI['2011sum']} ]} ] } ] }接着我们把刚才的选项代码给复制过来并赋值给option对象 myChart.setOption(option); 最后图表就生成了 |
要使用Echarts首先就要引入echarts文件【本文地址】
今日新闻 |
推荐新闻 |