Echarts圖表在實際項目中的應用說明

jopen 10年前發布 | 61K 次閱讀圖表/報表制作

效果：

功能：點擊主頁進去會有不同的圖表展現，點擊兩側會有展示不同的數據以及圖表。圖表也可以托拉拽，重組、歸為。

下面看下主要的代碼：
數據來源：此時還沒有連接接口

$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

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1452340442448.html

圖表/報表制作

Echarts圖表在實際項目中的應用說明

相關經驗

相關資訊

相關文檔

目錄