Angularjs动态加载ECharts(一)
时间:2022-07-23
本文章向大家介绍Angularjs动态加载ECharts(一),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今早发现,directive写的echarts组件,虽然能够获取到Controller中的数据,但是当我使用$http请求到的数据,想传到directive却总是获取不到,知道这是异步问题,图表加载后,数据才请求到,所以图表加载不了数据
解决方法
使用ng-if
,判断,如果有数据才显示,完美解决
<realtem-data ng-if="data" id="temdata" legend="legend" item="item" data="data"></realtem-data>
其余代码
controller代码
app.controller("temdataCtrl", function($scope, $http, $log) {
$http({
method: "get",
url: "http://..:3000/tem",
headers: {
"content-type": "application/json"
}
}).then(function(req) {
// console.log(req.data)
$scope.data = req.data
})
})
directive代码
app.directive('realtemData', function() {
return {
scope: {
id: "@",
data: "="
},
restrict: 'E',
template: '<div class="real-data-charts"></div>',
replace: true,
link: function($scope, element, attrs, controller) {
var option = {
color: ['#CD3700'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['温度'],
},
label: {
normal: {
show: true
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: [1, 2, 3, 4, 5],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '温度',
type: 'line',
barWidth: '60%',
data: $scope.data
}]
};
var myChart = echarts.init(document.getElementById($scope.id), 'macarons');
myChart.setOption(option);
}
};
});
图片.png
注意 发现如果多个数据的话,可能这么操作会导致图表上只有一个数据显示 所以我把所有的数据都放到一个对象中,然后ng-if只判断这个对象即可
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- seaborn更高效的统计图表制作工具
- 牛客2019跨年AK场题解(一)
- qiankun proxySand 沙箱
- MATLAB 与 C 语言的混合编程实战之辛普森积分法、自适应辛普森积分
- Java那些事之JDK环境配置及集成开发环境Eclipse安装
- 敲代码、作诗、写论文无所不能?史上最大AI模型GPT-3霸榜Github
- 数据结构实验——校园导游 实现最小生成树+最短路
- Salesforce LWC学习(二十六) 简单知识总结篇三
- 【Java】13 异常
- 【Java】14 多线程
- 【Java】16 字节流
- 【Java】17 字符流
- 极坐标系在数据可视化中的巧妙运用
- 【Java】18 增强流
- 【Java】19 网络编程