赞
踩
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();//调用方法
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。