一 echart包引用

下載解壓，放入lib中。
鏈接: https://pan.baidu.com/s/1dEMKXGl 密碼: s6c3
并在index.html中引用如圖兩個js文件。

引用包.png

image.png

二 頁面

html頁面

<!--餅圖-->
    <div>
      <donut-chart config="donutConfig" data="dataList.incomeData">
      </donut-chart>
    </div>

<!--柱狀圖-->
 <div id="id0001" style="width: 100%;height: 400px; padding: 0;margin: 0; border-width: 0; ">
 </div>

controller

/**
 * Created by xiehan on 2017/11/29.
 */
angular.module('studyApp.controllers')

  .controller('EchartCtrl', function ($scope, $rootScope, $ionicHistory,$location) {

    $scope.title = 'echart圖表';

    /*
     官方實例鏈接：http://echarts.baidu.com/examples.html
     */

    $scope.goBack = function () {
      $ionicHistory.goBack();
    };

    //用于數(shù)據(jù)的格式化
    $scope.dataList = {
      incomeData:""
    };
    // 餅圖
    $scope.pieConfig = {};
    // 環(huán)形圖
    $scope.donutConfig = {};

    init();

    function init() {
      initChartsConfig();
      initIncome();
      initConfigChart();
    }

    //餅圖配置初始化
    function initChartsConfig() {
      $scope.pieConfig = {
        center: [120, '50%'],
        radius: 90
      };
      $scope.donutConfig = {
        radius: [0, 90]
      };
    }
    //餅圖數(shù)據(jù)
    function initIncome(){
      var temp = [
        {
          NAME:"測試1",
          NUM:11
        },
        {
          NAME:"測試2",
          NUM:22
        },
        {
          NAME:"測試3",
          NUM:33
        },
        {
          NAME:"測試4",
          NUM:44
        }
      ];

      if (temp) {
        // 處理數(shù)據(jù)
        var temp2 = [];
        angular.forEach(temp, function (item) {
          var t = {x: item.NAME, y: item.NUM};
          temp2.push(t);
        });
        $scope.dataList.incomeData = [{
          name: 'echart餅圖測試',
          datapoints: temp2
        }];
      }
    }

    //柱狀圖數(shù)據(jù)
    function initConfigChart() {
      var parkaccountChart = echarts.init(document.getElementById('id0001'));//div 標(biāo)簽id
      var seriesLabel = {
        normal: {
          show: true,
          textBorderColor: '#333',
          textBorderWidth: 2
        }
      };
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['總數(shù)1', '總數(shù)2', '總數(shù)3'],
          bottom:true
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '8%',
          top:'5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name: '',
          axisLabel: {
            formatter: '{value}'
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data: ['y1', 'y2', 'y3']
        },
        series: [
          {
            name: '總數(shù)1',
            type: 'bar',
            label: seriesLabel,
            data: [165, 170, 330]
          },
          {
            name: '總數(shù)2',
            type: 'bar',
            label: seriesLabel,
            data: [150, 105, 110]
          },
          {
            name: '總數(shù)3',
            type: 'bar',
            label: seriesLabel,
            data: [220, 82, 63]
          }
        ]
      };
      parkaccountChart.setOption(option);

    }

  });

效果圖

效果圖.png