Ein einfaches Tutorial zum Implementieren des Echart-Diagrammeffekts in AngularJS

ehcart ist ein von Baidu erstelltes Datendiagramm, das auf nativem js basiert. Die Benutzeroberfläche und Konfiguration sind gut geschrieben und leicht zu lesen und können auch für kommerzielle Zwecke verwendet werden. In diesem Artikel wird hauptsächlich das prägnanteste Tutorial vorgestellt, das die Wirkung von Echart-Diagrammen in AngularJS erklärt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1 Echart-Paketreferenz

Laden Sie es herunter, entpacken Sie es und fügen Sie es in lib ein.

Download-Adresse: echart_jb51.rar

Und verweisen Sie auf die beiden js-Dateien, wie in der index.html gezeigt.

App.js zitierte Angular-Echarts

Zwei Seiten

HTML-Seite

<!--饼图-->
  <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>

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'));//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);

  }

 });

Rendering

Verwandte Empfehlungen:

Parsing der Parameterübergabemethode des AngularJS-Arrays

Eine Zusammenfassung, wie AngularJS mehrere asynchrone Anforderungen verarbeitet

Eine Zusammenfassung allgemeiner Kenntnisse für den Einstieg in AngularJS

Das obige ist der detaillierte Inhalt vonEin einfaches Tutorial zum Implementieren des Echart-Diagrammeffekts in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!