EChart学习——在日历中插入饼图
第一次使用EChart， 记录一下。
功能：日历控件里面插入饼图，一张饼图有三个部分组成，鼠标移动上去能显示所需要的数据，另外对应的星期，日期，月份都需要显示在图上。
首先去网上找一下例子，大概了解一下EChart
第一步：引用Js，引用Js的时候我遇到了一个问题：我的项目是使用maven管理的，所以我在对应项目的pom.xml文件中写入如下配置：
org.webjars
echarts
2.2.1
接着就可以通过“”添加引用了。
网上找个简单的入门，跟这个例子先配置好EChart的环境，确保图能出来再开始做复杂的。
图也出来了，开始做复杂的，把所需要的代码从http://echarts.baidu.com/examples/editor.html?c=calendar-pie里面提取，捣鼓了半天就是不出来，然后我又仔细研究了一下W3C的文档，发现Js文件引用的不一样，好吧，去官网下个echarts.min.js：http://echarts.baidu.com/download.html，然后也是从简单的日历功能开始测，发现都能出来，好哒，引用没问题。
第二步：在饼图里面插入自己所需要的数据，这里可以在官网Demo里面先随意修改测试，充分了解后再做插入。
代码：
$(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;
}
});
});