EChart学习——在日历中插入饼图

第一次使用EChart， 记录一下。

功能：日历控件里面插入饼图，一张饼图有三个部分组成，鼠标移动上去能显示所需要的数据，另外对应的星期，日期，月份都需要显示在图上。

首先去网上找一下例子，大概了解一下EChart

第一步：引用Js，引用Js的时候我遇到了一个问题：我的项目是使用maven管理的，所以我在对应项目的pom.xml文件中写入如下配置：

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>echarts</artifactId>
    <version>2.2.1</version>
</dependency>

然后在对应项目的Maven Dependencies下面就可以找到对应的jar包了

接着就可以通过“<script src="/webjars/echarts/2.2.1/echarts-all.js"></script>”添加引用了。

网上找个简单的入门，跟这个例子先配置好EChart的环境，确保图能出来再开始做复杂的。

图也出来了，开始做复杂的，把所需要的代码从http://echarts.baidu.com/examples/editor.html?c=calendar-pie里面提取，捣鼓了半天就是不出来，然后我又仔细研究了一下W3C的文档，发现Js文件引用的不一样，好吧，去官网下个echarts.min.js：http://echarts.baidu.com/download.html，然后也是从简单的日历功能开始测，发现都能出来，好哒，引用没问题。

第二步：在饼图里面插入自己所需要的数据，这里可以在官网Demo里面先随意修改测试，充分了解后再做插入。

代码：

<div class="col-xs-6 col-md-offset-3" id="main" style="width:800px; height: 600px;"></div>

$(document).ready(function() {
	$.ajax({
		url : "/*****/getall",
		type: "GET",
		success : function(data){//后端传回来的数据
			var app = {};
			var myChart = echarts.init(document.getElementById('main'));
			option = null;
			var cellSize = [80, 80];
			var pieRadius = 30;
			var startTime =data[0].time;
			var endTime = data[data.length-1].time;
			//中间一堆的逻辑处理我去掉了，重要的是思想
			
			var todaymonth = [];
			todaymonth.push(nowYearMonth);    //给下面的range准备数值，如果你不需要变，可以和官网Demo一样直接‘range: ['2017-02']’

			var personAndRole =  new Array(data.length);  
			for(var i = 0;i < personAndRole.length; i++){  
				personAndRole[i] = new Array(3);    //每行有3列  
			}//定义一个数组，接下来是给数组赋值，我也省略了，突出思想

			function getVirtulData() {
				var start = +echarts.number.parseDate(startTime);
				var end = +echarts.number.parseDate(endTime);				
				var dayTime = 3600 * 24 * 1000;
				var data = [];
				for (var time = start; time <= end; time += dayTime) {
					data.push([
					           echarts.format.formatTime('yyyy-MM-dd', time),
					           Math.floor(Math.random() * 10000),
					           personAndRole    //把自己需要的值也传下去
					]);
				}
				return data;
			}
			function getPieSeries(scatterData, chart) {
				return echarts.util.map(scatterData, function (item, index) {
					var center = chart.convertToPixel('calendar', item);
					return {
						id: index + 'pie',
						type: 'pie',
						center: center,
						label: {
							normal: {
								formatter: '{c}',
								position: 'inside'
							}
						},
						radius: pieRadius,
						data: [
						       {name: item[2][index][0], value: Math.round(1/3 * 24)},    //在这边获取想要的值
						       {name: item[2][index][1], value: Math.round(1/3 * 24)},
						       {name: item[2][index][2], value: Math.round(1/3 * 24)}
						]
					};
			    });
			}
			var scatterData = getVirtulData();
			option = {
					tooltip : {},
					legend: {
						data: ['A', 'B', 'C'],
						bottom: 20
					},
					calendar: {
						top: 'middle',
						left: 'center',
						orient: 'vertical',
						cellSize: cellSize,
						yearLabel: {
							show: false,
							textStyle: {
								fontSize: 30
							}
						},
						dayLabel: {
							margin: 20,
							firstDay: 1,
							nameMap: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
						},
						range: todaymonth
					},
					series: [{
						id: 'label',
						type: 'scatter',
						coordinateSystem: 'calendar',
						symbolSize: 1,
						label: {
							normal: {
								show: true,
								formatter: function (params) {
									return echarts.format.formatTime('dd', params.value[0]);
								},
								offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
								textStyle: {
									color: '#000',
									fontSize: 14
								}
							}
						},
						data: scatterData
					}]
				};
			if (!app.inNode) {
				setTimeout(function () {
					myChart.setOption({
						series: getPieSeries(scatterData, myChart)
					});
				}, 10);
			};
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
			return;
			}		
	});	
});

转载请注明出处，谢谢： https://blog.youkuaiyun.com/Blue___Ocean/article/details/80652510