echarts案例
1. echarts参考地址:http://echarts.baidu.com/echarts2/doc/doc.html#Toolbox
2. 要显示如下所示的图:
3. 数据数组:
4. 相应的js代码
//季度保费统计
var quarterPremium = function(){
finder.post("queryOverByYear", {}).then(
function (data) {
var year = '';
var arrAmount=[];
angular.forEach(data,function(data1){
if(year == data1.year){
arrAmount[arrAmount.length - 1].data.push(Math.round(data1.amount/100)/100);
}else{
year = data1.year;
var yearObj ={
year:year,
data:[]
};
//如果前几季度返回来空,就赋值为0
for(var i = 1; i < data1.quarter; i++){
yearObj.data.push(0);
}
yearObj.data.push(Math.round(data1.amount/100)/100);
arrAmount.push(yearObj);
}
});
initLineChart(arrAmount);
},function (err) {
//请求失败
// console.log(err)
layerMsg('查询失败请联系管理员');
}
);
};
//季度保费统计数据
var initLineChart = function(data){
var ele = document.getElementById('premium_income');
lineChartObj = echarts.init(ele);
// 指定图表的配置项和数据
var option = {
color: [ '#E98F6F','#6AB0B8', '#334B5C'],
title: {
text: '保费收入(万元)',
textStyle:{
fontSize : 14
}
},
tooltip: {
trigger: 'axis',
//formatter: "{b} <br> 合格率: {c}%"
},
legend: {
data:[ ]
},
grid: {
top:'20%',
left: '5%',
right: '10%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
name: '',
boundaryGap: false,
data: ['一季度','二季度','三季度','四季度']
},
yAxis: {
type: 'value',
},
series: [
{
name:data[0].year + '年',
type:'line',
stack: '总量1',
data:data[0].data
},
{
name:data[1].year + '年',
type:'line',
stack: '总量2',
data:data[1].data
},
{
name:data[2].year + '年',
type:'line',
stack: '总量3',
data:data[2].data
},
]
};
// 使用刚指定的配置项和数据显示图表。
lineChartObj.setOption(option);
};
quarterPremium();//调用方法