Maison > Article > interface Web > Comment implémenter l'effet de graphique echart dans AngularJS

Comment implémenter l'effet de graphique echart dans AngularJS

亚连original: 2018-06-23 15:58:141669parcourir

Cet article présente principalement le tutoriel le plus simple et le plus concis pour obtenir l'effet de graphique echart dans angulairejs. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cet article présente le tutoriel le plus concis sur la façon d'implémenter l'effet de graphique echart dans angulairejs. Je voudrais le partager avec vous. Les détails sont les suivants :

ehcart est un graphique de données réalisé 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.

1 référence du package echart

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

Adresse de téléchargement : echart_jb51.rar

Et référencez les deux fichiers js comme indiqué dans le index.html.

Références App.js angulaire-echarts

Deuxième page

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(&#39;studyApp.controllers&#39;)

 .controller(&#39;EchartCtrl&#39;, function ($scope, $rootScope, $ionicHistory,$location) {

  $scope.title = &#39;echart图表&#39;;

  /*
   官方实例链接：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, &#39;50%&#39;],
    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: &#39;echart饼图测试&#39;,
     datapoints: temp2
    }];
   }
  }

  //柱状图数据
  function initConfigChart() {
   var parkaccountChart = echarts.init(document.getElementById(&#39;id0001&#39;));//p 标签id
   var seriesLabel = {
    normal: {
     show: true,
     textBorderColor: &#39;#333&#39;,
     textBorderWidth: 2
    }
   };
   var option = {
    tooltip: {
     trigger: &#39;axis&#39;,
     axisPointer: {
      type: &#39;shadow&#39;
     }
    },
    legend: {
     data: [&#39;总数1&#39;, &#39;总数2&#39;, &#39;总数3&#39;],
     bottom:true
    },
    grid: {
     left: &#39;1%&#39;,
     right: &#39;4%&#39;,
     bottom: &#39;8%&#39;,
     top:&#39;5%&#39;,
     containLabel: true
    },
    xAxis: {
     type: &#39;value&#39;,
     name: &#39;&#39;,
     axisLabel: {
      formatter: &#39;{value}&#39;
     }
    },
    yAxis: {
     type: &#39;category&#39;,
     inverse: true,
     data: [&#39;y1&#39;, &#39;y2&#39;, &#39;y3&#39;]
    },
    series: [
     {
      name: &#39;总数1&#39;,
      type: &#39;bar&#39;,
      label: seriesLabel,
      data: [165, 170, 330]
     },
     {
      name: &#39;总数2&#39;,
      type: &#39;bar&#39;,
      label: seriesLabel,
      data: [150, 105, 110]
     },
     {
      name: &#39;总数3&#39;,
      type: &#39;bar&#39;,
      label: seriesLabel,
      data: [220, 82, 63]
     }
    ]
   };
   parkaccountChart.setOption(option);

  }

 });

rendu

Ce qui précède est ce que j'ai compilé pour vous, J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus