Comment implémenter un graphique echart dans AngularJS

Cette fois, je vais vous montrer comment implémenter le graphique echart dans angularjs et quelles sont les précautions pour implémenter le graphique echart dans angulairejs. Ce qui suit est un cas pratique. jetez un oeil.

ehcart est un graphique de données créé par Baidu, basé sur js natif. L'interface et la configuration sont bien écrites et faciles à lire, et peuvent également être utilisées à des fins commerciales.

Référence du package echart

Téléchargez, décompressez et placez-le dans la lib.

Et référencez le fichier js dans index.html.

Référence angulaire-echarts

dans app.js Deux pages

page html

<!--饼图-->
  <p>
   <donut-chart config="donutConfig" data="dataList.incomeData">
   </donut-chart>
  </p>

<!--柱状图-->
 <p id="id0001" style="width: 100%;height: 400px; padding: 0;margin: 0; border-width: 0; ">
 </p>

contrôleur

/**
 * 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'));//p 标签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);
  }
 });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Ajouter une boîte de dialogue contextuelle dans l'applet WeChat

Comment obtenir un changement de couleur entrelacé dans js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!