如何用echarts生成每日考勤工时成本分析图表

最近参与开发考勤管理系统，里面有各种统计分析图表，可以用的图表组件也选了很多，有highcharts, echarts, 因为学习成本和文档阅读便利性，所以最终选择了echart做为图表组件，记录一下学习，下面是图表效果

要使用Echarts首先就要引入echarts文件

<script src="echarts.js"></script>

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);
最后图表就生成了