Echarts图表在实际项目中的应用说明

jopen 9年前

效果:

功能:点击主页进去会有不同的图表展现,点击两侧会有展示不同的数据以及图表。图表也可以托拉拽,重组、归为。

下面看下主要的代码:
数据来源:此时还没有连接接口

$scope.getData = [];//获取到的数据  if(flag == "thisMonth"){    $scope.chartsTitle = "本月";    index = 0;    $scope.getData = [      {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"10.10%",value:"600"},      {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"2.29%",value:"136.2"},      {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"8.80%",value:"523"},      {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"4.88%",value:"290"},      {imgSrc:"img/keepAccounts/rent.png",name:"租房",percentage:"20.19%",value:"1200"},      {imgSrc:"img/keepAccounts/teamBuilding.png",name:"团建",percentage:"13.47%",value:"800.6"},      {imgSrc:"img/keepAccounts/office.png",name:"办公",percentage:"0.60%",value:"35.8"},      {imgSrc:"img/keepAccounts/others.png",name:"其他",percentage:"5.99%",value:"355.8"},      {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"33.68%",value:"2002"}    ];  }else if(flag == "waitCommit"){    index = 1;    $scope.getData = [      {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"38.12%",value:"365"},      {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"11.09%",value:"106.2"},      {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"28.09%",value:"269"},      {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"1.60%",value:"15.3"},      {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"21.10%",value:"202"}    ];    $scope.chartsTitle = "待提交";  }else if(flag == "checked"){    index = 2;    $scope.chartsTitle = "已审批";    $scope.getData = [      {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"29.79%",value:"35"},      {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"13.79%",value:"16.2"},      {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"24.68%",value:"29"},      {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"13.02%",value:"15.3"},      {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"18.72%",value:"22"}    ];  }

因为有三个入口跳入会展示不同的数据,所以这里有个if判断,index是为了点击左右两侧按钮跳转展示不同页面的数据的。

表格的配置:

//路径配置  require.config({    paths:{      echarts:'./js/dist'    }  });  //图表使用  function drawCharts (dataArr,colorArr){    require(      [        'echarts',        'echarts/chart/pie'      ],      function (ec,data) {        var myChart = ec.init(document.getElementById('chartsDiv'), 'macarons');        var option = {          tooltip : {            trigger: 'item',            formatter: "{a} <br/>{b} : {c} ({d}%)"          },          calculable : true,          series : [            {              name:'消费金额',              type:'pie',              radius : ['50%', '70%'],              itemStyle : {                normal : {                  label : {                    show : false                  },                  labelLine : {                    show : false                  }                },                emphasis : {                  label : {                    show : true,                    position : 'center',                    textStyle : {                      fontSize : '30',                      fontWeight : 'bold'                    }                  }                }              },              data:[                ]            }          ],          color:[          ]        };        option.series[0].data = dataArr;        option.color = colorArr;        myChart.setOption(option);      }    );  }

这里面图表的颜色和图表的数据要设置下:

//图表的数据和颜色  function setData (data){    chartsData = [];    chartsColor = [];    for(var i = 0;i<data.length;i++){      var templateData = {};      templateData.value = data[i].value;      templateData.name = data[i].name;      $scope.costMoney+=parseInt(data[i].value);      chartsData.push(templateData);      if(data[i].name == "通讯"){        chartsColor[i] = "#98D30B";      }else if(data[i].name == "团建"){        chartsColor[i] = "#0A92D1";      }else if(data[i].name == "餐饮"){        chartsColor[i] = "#0AD1CA";      }else if(data[i].name == "办公"){        chartsColor[i] = "#7579C0";      }else if(data[i].name == "租房"){        chartsColor[i] = "#B58DFF";      }else if(data[i].name == "交通"){        chartsColor[i] = "#FF8E8E";      }else if(data[i].name == "旅行"){        chartsColor[i] = "#FFA749";      }else if(data[i].name == "酒店"){        chartsColor[i] = "#F19EC2";      }else if(data[i].name == "其他"){        chartsColor[i] = "#85A6C0";      }    }  }

然后在页面加载进来的时候需要调用这些函数:

$scope.$on('$ionicView.enter',function(){    //设置表格div高度    $(".chartsDiv").css('height',$(".chartsRow").outerHeight());    $(".centerDiv").css('left',window.innerWidth/2-$(".centerDiv").outerHeight()/2-7);    $(".chartsRow").css("margin-top",$(".dateTime").outerHeight());    setData($scope.getData);    drawCharts(chartsData,chartsColor);  });

注意这里的$ionicView.enter
因为要设置抽屉效果的div的高度

点击两侧按钮,显示别的页面的不同的数据需要重新加载下这个过程
封装的方法如下:

/点击左边右边按钮重新加载数据  function reload(item){    if(item == 0){      $scope.chartsTitle = "本月";      $scope.getData = [        {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"10.10%",value:"600"},        {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"2.29%",value:"136.2"},        {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"8.80%",value:"523"},        {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"4.88%",value:"290"},        {imgSrc:"img/keepAccounts/rent.png",name:"租房",percentage:"20.19%",value:"1200"},        {imgSrc:"img/keepAccounts/teamBuilding.png",name:"团建",percentage:"13.47%",value:"800.6"},        {imgSrc:"img/keepAccounts/office.png",name:"办公",percentage:"0.60%",value:"35.8"},        {imgSrc:"img/keepAccounts/others.png",name:"其他",percentage:"5.99%",value:"355.8"},        {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"33.68%",value:"2002"}      ];    }else if(item == 1){      $scope.chartsTitle = "待提交";      $scope.getData = [        {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"28.09%",value:"269"},        {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"11.09%",value:"106.2"},        {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"1.60%",value:"15.3"},        {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"38.12%",value:"365"},        {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"21.10%",value:"202"}      ];    }else if(item == 2){      $scope.chartsTitle = "已审批";      $scope.getData = [        {imgSrc:"img/keepAccounts/call.png",name:"通讯",percentage:"13.79%",value:"16.2"},        {imgSrc:"img/keepAccounts/hotel.png",name:"酒店",percentage:"24.68%",value:"29"},        {imgSrc:"img/keepAccounts/traffic.png",name:"交通",percentage:"13.02%",value:"15.3"},        {imgSrc:"img/keepAccounts/food.png",name:"餐饮",percentage:"29.79%",value:"35"},        {imgSrc:"img/keepAccounts/travel.png",name:"旅行",percentage:"18.72%",value:"22"}      ];    }    setData($scope.getData);    drawCharts(chartsData,chartsColor);  }

然后点击方法里直接调用,就出现了所有的效果

$scope.lastPage = function(){    index-=1;    thisIndex = Math.abs(index%3);    reload(thisIndex);  };  $scope.nextPage = function(){    index+=1;    thisIndex = Math.abs(index%3);    reload(thisIndex);  };

这里注意方法的封装,代码的复用。

来自: http://my.oschina.net/u/2491705/blog/600106