angular结合echarts创建图表
原理：
利用angularjs中的指令（directive）将echarts封装。
步骤：
1.封装函数：
app.directive('line', function() {
return {
restrict: 'E',
template: '<div style="height:400px;width:100px;"></div>',
replace: true,
link: function($scope, element, attrs, controller) {
var option = {
······
};
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption(option);
}
};
});
2.创建块用来放置图表
<line id="main" legend="legend" item="item" data="data"></line>
指令（directive）的作用就是自定义元素。所以创建<line></line>
3.控制器获得数据
app.controller('lineCtrl', function($scope) {
$scope.legend = ["Berlin", "London",'New York','Tokyo'];
$scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$scope.data = [
[-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2], //Berlin
[0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //London
[4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3], //New York
[7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10] //Tokyo
];
});
4.将echarts中得到的option配置放入函数中，并把数据调用进配置。
var option = {
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show: true,
trigger: 'item'
},
// 图例
legend: {
data: $scope.legend
},
// 横轴坐标轴
xAxis: [{
type: 'category',
data: $scope.item
}],
// 纵轴坐标轴
yAxis: [{
type: 'value'
}],
// 数据内容数组
series: function(){
var serie=[];
for(var i=0;i<$scope.legend.length;i++){
var item = {
name : $scope.legend[i],
type: 'line',
data: $scope.data[i]
};
serie.push(item);
}
return serie;
}()
};
完整测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线图</title>
</head>
<!--加载AngularJS-->
<script src="../producers/angular/angular.min.js"></script>
<!--加载ECharts-->
<script src="../producers/echars/echarts.js"></script> <body ng-app="app" ng-controller="lineCtrl">
<line id="main" legend="legend" item="item" data="data"></line> <script type="text/javascript"> var app = angular.module('app', []); app.controller('lineCtrl', function($scope) {
$scope.legend = ["Berlin", "London",'New York','Tokyo'];
$scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$scope.data = [
[-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2], //Berlin
[0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //London
[4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3], //New York
[7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10] //Tokyo
];
}); app.directive('line', function() {
return {
scope: {
id: "@",
legend: "=",
item: "=",
data: "="
},
restrict: 'E',
template: '<div style="height:400px;width:100px;"></div>',
replace: true,
link: function($scope, element, attrs, controller) {
var option = {
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show: true,
trigger: 'item'
},
// 图例
legend: {
data: $scope.legend
},
// 横轴坐标轴
xAxis: [{
type: 'category',
data: $scope.item
}],
// 纵轴坐标轴
yAxis: [{
type: 'value'
}],
// 数据内容数组
series: function(){
var serie=[];
for(var i=0;i<$scope.legend.length;i++){
var item = {
name : $scope.legend[i],
type: 'line',
data: $scope.data[i]
};
serie.push(item);
}
return serie;
}()
};
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption(option);
}
};
});
</script>
</body>
</html>
5.引用json文件中的数据
注意：引用数据需要同步，angularjs中的$http没有同步api，目测最简单的方法，用ajax原生，直接设置为同步请求。
app.controller('histogramcontroller', function ($scope,$http) {
$.ajax({
type: "post",
url: "json/teacher/histogram.json",
cache:false,
async:false,
success: function(xmlobj){
$scope.item=xmlobj.dataline;
$scope.data=xmlobj.data;
}
});
});
angular结合echarts创建图表的更多相关文章
- Vue 爬坑之路（八）—— 使用 Echarts 创建图表
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 c ...
- Vue怎么使用Echarts创建图表
摘要:在后台管理系统中,我们经常会遇到图表,比如说:柱形图,饼状图,折线图,雷达图等等,而用来写图表插件有很多,我这里主要介绍Echarts在项目里怎么使用,官网地址如下:https://echart ...
- Angular+ionic2+Echarts 实现图形制作，以饼图为例
step1:添加插件echart; npm install echarts --save package.json文件中会在dependencies中添加echarts,如下图: step2:运行cm ...
- 使用chart和echarts制作图表
前 言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...
- python使用VBA:Excel创建图表(转)
# -*- coding: utf-8 -*- """ Created on Thu Mar 06 11:22:03 2014 @author: Administrato ...
- C# 在PPT幻灯片中创建图表
图表能够很直观的表现数据在某个时间段的变化趋势,或者呈现数据的整体和局部之间的相互关系,相较于大篇幅的文本数据,图表更增加了我们分析数据时选择的多样性,是我们挖掘数据背后潜在价值的一种更为有效地方式. ...
- Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
随机推荐
- Struts06---通配符的使用
01.创建对应的login.jsp页面 <%@ page language="java" import="java.util.*" pageEncodin ...
- 《转》浅谈EJB
ejb一直是一个让我很纠结的技术,虽然ejb作为sun推荐的最佳实践,在sun的J2EE教程中,推荐jsp和servlet作为view层,ejb作为业务逻辑层. 上述就是J2EE教程讲J2EE体系中J ...
- Linux中查看各文件夹大小命令：du -h --max-depth=1
Linux中查看各文件夹大小命令:du -h --max-depth=1 du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-siz ...
- Leetcode22. Generate Parentheses（生成有效的括号组合）
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/74937307冷血之心的博客) 题目如下:
- svn: E220001: 遇到不可读的路径；拒绝访问。
在客户端试图 svn merge 总是报svn: E220001: 遇到不可读的路径:拒绝访问.这个错误 提示 : SVN 遇到不可读的路径:拒绝访问. 英文是: Unreadable path en ...
- Python 多版本共存之pyenv
经常遇到这样的情况: 系统自带的 Python 是 2.6,自己需要 Python 2.7 中的某些特性: 系统自带的 Python 是 2.x,自己需要 Python 3.x: 此时需要在系统中安装 ...
- 如何快速上手.net下单元测试工具NUnit？
NUnit基本使用 准备知识: 读此博文需要了解单元测试基本概念及NUnit的的安装. 传送门:单元测试之道(使用NUnit) 1.常见的错误 当学习一个新东西时,先学习错误,是最快的方式. 1.1 ...
- Linux fork exec等
http://www.cnblogs.com/leoo2sk/archive/2009/12/11/talk-about-fork-in-linux.html http://www.cnblogs.c ...
- oracle alter table
oracle alter table ALTER TABLE (表名) ADD (列名 数据类型); ALTER TABLE (表名) MODIFY (列名 数据类型); ALTER TABLE (表 ...
- 转载pll工作模式解析
PLL共有四种工作模式,只有理解了这四种工作模式的特点,才能在设计中选用恰当的模式,完成自己设计的预期功能.这四种工作模式分别是普通模式(Normal Mode).零延迟缓冲模式(Zero Delay ...