echarts案例

1. echarts参考地址:http://echarts.baidu.com/echarts2/doc/doc.html#Toolbox   

2. 要显示如下所示的图:

echarts案例

3. 数据数组: 

echarts案例

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();//调用方法