详解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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 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编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
AngularJS快速入门
2015/04/02 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
js实现双色球效果
2020/08/02 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python实现发送邮件及附件功能
2021/03/02 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Python中断多重循环的思路总结
2019/10/04 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
软件测试英文面试题
2012/10/14 面试题
电脑销售顾问自荐信
2014/01/29 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
元旦获奖感言
2014/03/08 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
个人自荐书怎么写
2015/03/26 职场文书
公司借条范本
2015/05/25 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
vue自定义右键菜单之全局实现
2022/04/09 Vue.js