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调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
随机推荐
- DDOS SYN Flood攻击、DNS Query Flood， CC攻击简介——ddos攻击打死给钱。限网吧、黄网、博彩，，，好熟悉的感觉有木有
摘自:https://zhuanlan.zhihu.com/p/22953451 首先我们说说ddos攻击方式,记住一句话,这是一个世界级的难题并没有解决办法只能缓解 DDoS(Distributed ...
- LeetCode OJ：Compare Version Numbers（比较版本字符串）
Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...
- L131
Fake, Low Quality Drugs Come at High CostAbout one in eight essential medicines in low- and middle-i ...
- C#模拟网络POST请求
using System; using System.IO; using System.Net; using System.Text; using System.Collections.Generic ...
- Android Broadcast 和 BroadcastReceiver的权限机制
在Android应用开发中,有时会遇到以下两种情况, 1. 一些敏感的广播并不想让第三方的应用收到 : 2. 要限制自己的Receiver接收某广播来源,避免被恶意的同样的ACTION的广播所干扰. ...
- React Native组件（一）组件的生命周期
相关文章 React Native探索系列 前言 React Native有很多组件比如Image.ListView等等,想要合理的使用组件,首先要先了解组件的生命周期. 1.概述 无论你是开发And ...
- （二）java环境搭建
Java运行环境的搭建: 什么是JRE,什么是JDK? JRE:(java运行环境)包括jvm(java虚拟机)和java运行的核心类库,如果只是运行java程序,只需安装JRE JDK:(java开 ...
- wlan经常掉线怎么办？
有没有这样的情款,好好的网络总是突然断掉然,之后就需要重新连接,连接以后没多久有需要重新连接.本次经验就来和大家一起分享一下几种情况的解决方法,非常的简单实用. 工具/原料 电脑 电源设置问题 1.本 ...
- Yet another A + B
time limit per test 0.25 s memory limit per test 64 MB input standard input output standard output Y ...
- Web应用程序与Web网站及部署在IIS中
在Visual Studio可以创建 Web 应用程序项目或网站项目.通过选择 新建项目 或 打开项目 创建或打开一个 Web 应用程序项目在Visual Studio 文件 菜单. 通过选择 新建网 ...