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


Posted in Javascript onNovember 29, 2017

本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下:

ehcart是百度做的数据图表,基于原生js。接口和配置都写的很好很易读,还可以用于商用。

一 echart包引用

下载解压,放入lib中。

下载地址:echart_3water.rar

并在index.html中引用如图两个js文件。

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

app.js中引用angular-echarts

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

二 页面

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

  //用于数据的格式化
  $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);

  }

 });

效果图

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 #Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 #Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 #Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 #Javascript
node.js中axios使用心得总结
Nov 29 #Javascript
Vue2.0用户权限控制解决方案
Nov 29 #Javascript
vue.js项目中实用的小技巧汇总
Nov 29 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
对python判断是否回文数的实例详解
2019/02/08 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
django rest framework serializers序列化实例
2020/05/13 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
体育之星事迹材料
2014/05/11 职场文书
计算机专业自荐信
2014/05/24 职场文书
中秋手机店促销方案
2014/06/16 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
幼儿园个人总结
2015/02/28 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python