angularjs实现echart图表效果最简洁教程

一 echart包引用

下载解压，放入lib中。
链接: https://pan.baidu.com/s/1dEMKXGl 密码: s6c3
并在index.html中引用如图两个js文件。

引用包.png

app.js中引用angular-echarts

image.png

二 页面

html页面

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();
    };

    //用于数据的格式化
    $scope.dataList = {
      incomeData:""
    };
    // 饼图
    $scope.pieConfig = {};
    // 环形图
    $scope.donutConfig = {};

    init();

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

    //饼图配置初始化
    function initChartsConfig() {
      $scope.pieConfig = {
        center: [120, '50%'],
        radius: 90
      };
      $scope.donutConfig = {
        radius: [0, 90]
      };
    }
    //饼图数据
    function initIncome(){
      var temp = [
        {
          NAME:"测试1",
          NUM:11
        },
        {
          NAME:"测试2",
          NUM:22
        },
        {
          NAME:"测试3",
          NUM:33
        },
        {
          NAME:"测试4",
          NUM:44
        }
      ];

      if (temp) {
        // 处理数据
        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
        }];
      }
    }

    //柱状图数据
    function initConfigChart() {
      var parkaccountChart = echarts.init(document.getElementById('id0001'));//div 标签id
      var seriesLabel = {
        normal: {
          show: true,
          textBorderColor: '#333',
          textBorderWidth: 2
        }
      };
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总数1', '总数2', '总数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: '总数1',
            type: 'bar',
            label: seriesLabel,
            data: [165, 170, 330]
          },
          {
            name: '总数2',
            type: 'bar',
            label: seriesLabel,
            data: [150, 105, 110]
          },
          {
            name: '总数3',
            type: 'bar',
            label: seriesLabel,
            data: [220, 82, 63]
          }
        ]
      };
      parkaccountChart.setOption(option);

    }

  });

效果图

效果图.png