详解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 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
javascript 定义新对象方法
Feb 20 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 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
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
Python中__name__的使用实例
2015/04/14 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python实现吃苹果小游戏
2020/03/21 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
求职信需要的五点内容
2014/02/01 职场文书
档案工作汇报材料
2014/08/21 职场文书
2014年文秘工作总结
2014/11/25 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
关于开学的感想
2015/08/10 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电