详解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 31 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
React-router中结合webpack实现按需加载实例
May 25 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
javascript运行机制之执行顺序理解
Aug 03 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python新手经常遇到的17个错误分析
2014/07/30 Python
Python列表(List)知识点总结
2019/02/18 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
css3高级选择器使用方法
2013/12/02 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
大四本科生的自我评价
2013/12/30 职场文书
代领报检证委托书范本
2014/10/11 职场文书
小学校本教研总结
2015/08/13 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
Python 可迭代对象 iterable的具体使用
2021/08/07 Python