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调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
随机推荐
- 【Hive】窗口函数
我们都知道在sql中有一类函数叫做聚合函数,例如sum().avg().max()等等, 这类函数可以将多行数据按照规则聚集为一行,一般来讲聚集后的行数是要少于聚集前的行数的. 但是有时我们想要既显示 ...
- ionic2——开发利器之Visual Studio Code 常用快捷键
主命令框 F1 或 Ctrl+Shift+P: 打开命令面板.在打开的输入框内,可以输入任何命令,例如: 按一下 Backspace 会进入到 Ctrl+P 模式 在 Ctrl+P 下输入 > ...
- USB转串口WIN8驱动安装
http://jingyan.baidu.com/article/11c17a2c0bb606f446e39da0.html //查看百度经验 http://jingyan.baidu.com/ar ...
- Could not publish server configuration for Tomcat v6.0 Server at localhost.错误问题解决
经常在使用tomcat服务器的时候 总会发生一些莫名其妙的错误. 就像下面这个错误: 在配置文件中存在多个/MyWeb的配置,导致不能发布服务. 错误信息: Could not publish ser ...
- DTO数据传输对象
如果有多个对象需要传输到页面上需要用DTO传输
- LeetCode OJ：Spiral Matrix（螺旋矩阵）
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...
- LeetCode OJ：Palindrome Linked List（回文链表判断）
Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...
- java事务（二）——本地事务
本地事务 事务类型 事务可以分为本地事务和分布式事务两种类型.这两种事务类型是根据访问并更新的数据资源的多少来进行区分的.本地事务是在单个数据源上进行数据的访问和更新,而分布式事务是跨越多个数据源来进 ...
- INIT: vesion 2.88 booting
/***************************************************************************** * INIT: vesion 2.88 b ...
- Python标准库之time和datetime
注:博客转载自:https://www.cnblogs.com/zhangxinqi/p/7687862.html 1.python3日期和时间 Python 程序能用很多方式处理日期和时间,转换日期 ...