一.绘制柱状图:直接上代码

1.首先下载echarts-all文件(这里就不赘述了),然后是创建一个bar.js及内容如下:

bar.js内容:


var app = require("../app");
app.directive("barY",["$http","regex",function ($http) {

return {
scope: {
id: "@",
legend: "=",
item: "=",
data: "="
},
restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
template: '<div style="height:400px"></div>',
replace: true,
link: function($scope, iElm, iAttrs, controller) {
var option = {
tooltip: {
show: true,
trigger: "axis"
},
legend: {data:$scope.legend},
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'category',
data: $scope.item
}],
series: function() {
var serie = [];
for (var i = 0; i < $scope.legend.length; i++) {
var item = {
name: $scope.legend[i],
type: 'bar',
data: $scope.data[i]
};
serie.push(item);
}
return serie;
}()
};
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById($scope.id),'macarons');
// 为echarts对象加载数据
myChart.setOption(option);
}
};
}]);记得在main.js导出bar.js,否则无法使用额。
接下来是在对应的.html文件和.js文件写对应代码,如下:
html内容:
<bar-y id="bar" legend="legendBar" item="itemBar" data="dataBar"></bar-y>
js文件内容:
var app = require("../app");

app.controller("welcomeCtrl", ["$scope", function($scope) {
// 柱状图
$scope.legendBar = [""];
$scope.itemBar = ['XX企业', 'XX企业', 'XX企业', 'XX企业', 'XX企业', 'XX企业']; //Y轴展示数据
$scope.dataBar = [
[5, 10, 10, 20, 30, 40] //2015年数据
];

}]);效果如下:

												

angular1使用echarts2绘制图标的更多相关文章

  1. AI: 绘制图标的实例

    AI绘制矢量电影图标 http://www.fevte.com/tutorial-2299-1.html AI绘制水晶质感QUICKTIME图标 http://wenku.baidu.com/view ...

  2. css绘制图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. C# 动态绘制任务栏图标的实现

    通常我们在做一个应用时会遇到这样的需求:将收到的消息条数显示到任务栏,比如如下的效果 怎么实现呢? 答案是采用WindowsAPICodePack实现,具体参见:Windows 7 任务栏开发 之 覆 ...

  4. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  5. 给ListBox每项加图标

    先设置listBoxMsg.DrawMode = DrawMode.OwnerDrawFixed; private void listBoxMsg_DrawItem(object sender, Dr ...

  6. 学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...

  7. VC++实现生成右键菜单及添加图标

    用VC++实现弹出菜单比较简单,这里介绍其中的一种来实现一个鼠标右键弹出菜单,效果如下图所示: 步骤: 一.新建一个基于对话框的MFC应用程序-----PopMenu 二.添加一个菜单资源------ ...

  8. 使用Enterprise Architecture绘制10种UML画画

    UML绘制10种课程要求UML画画,选Enterprise Architecture作为一个绘图工具,每一个草图必须是网上找教程,我觉得很麻烦,还有一些数字并没有找到详细的教程.在我自己找一个绘图方法 ...

  9. Android 高仿微信6.0主界面 带你玩转切换图标变色

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述 学习Android少不了模仿 ...

随机推荐

  1. 设置鼠标光标与页面favicon

    鼠标光标 body{cursor: url('http://image.XXXX.com/ii.png'),default;} 2. favicon <link rel="shortc ...

  2. 计算机网络模型与5G协议

    计算机网络模型与5G协议 目录 计算机网络模型与5G协议 一.分层思想 1.什么是分层思想 2.分层思想的优势 二.osi七层参考模型 1.国际标准化组织(ios) 2.七层模型及对应功能和硬件 3. ...

  3. Linux Ubuntu安装Nvidia多GPU通信库NCCL

    0. 前言 在使用Python版本的PaddleDetection进行一些实验时,想同时利用多个GPU提高效率,遇到了一点问题 You may need to install 'nccl2' from ...

  4. [翻译]Introduction to JSON Web Tokens

    JWT: Json Web Tokens JWT是一种开放标准(RFC 7519),它定义了一种紧凑且独立的方式,用于将各方之间的信息安全地传输为JSON对象.因为它是经过数字签名的,所以该信息可以进 ...

  5. drop、truncate、delete的区别

    (1)DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作. TRUNCATE TABLE 则一次性地从表中删除所有的数据并不把单独 ...

  6. ssh一段时间无操作后自动断开连接(假死)问题

    平时使用ssh远程服务器的时候(注:远程虚拟机一般不会有这个问题),一段时间没有操作,ssh连接就会处于假死状态,以至于需要重新进行ssh连接,不管你用的什么远程工具都会出现这个问题,那么通过心跳检测 ...

  7. C#颠倒字符串

    本函数实现了反转字符串的功能,例如字符串"张赐荣",反转后得到"荣赐张". public static string ReverseText(this stri ...

  8. vue实例中的watch属性

    watch 就是监听,当数据发生改变的时候就执行 data:{ num1:1, num2:2 }, watch:{ num1(newValue){ }, num2(newValue,oldValue) ...

  9. maven项目 mvn clean install 或 build,报错:Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test

    解决办法 在pom文件中添加

  10. kali linux开启ssh

    虚拟机中安装好Kali linux 2.0,如何从windows中通过SecureCRT.putty或XShell等工具远程到Kali中. [GeeK]出诊过程如下: 1.首先在window10中te ...