knockout+echarts实现图表展示（echarts数据可视化图表）
cac55 2024-11-13 09:33 16 浏览 0 评论
一、需要学习的知识
knockout, require, director, echarts, jquery。简单的入一下门，网上的资料很多，最直接就是进官网校习。
二、效果展示
三、require的配置
require.config.js中可以配置我们的自定义模块的加载。
require.config({
baseUrl: ".",
paths: {
text: "requirejs/text",
jquery: "jquery/jquery-1.11.2",
jqueryconfirm:"jquery/jquery-confirm",
knockout: "knockout/knockout-3.2.0.debug",
director:"director/director",
echarts: "echarts/echarts.min"
}
});当前项目目录结构如下。
没有配置路由的index.html如下。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>widget</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<div id="content">
</div>
</div>
</body>
<script src="requirejs/require.js"></script>
<script src="js/require.config.js"></script>
<script src="js/index.js"></script>
</html>这样，所有的模块都是可以被找到被加载的。
现在改变一些目录结构，在根目录下新建index文件夹，将index.html放入该文件夹下。并修改index.html中script的引用路径，如下。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>widget</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<div id="content">
</div>
</div>
</body>
<script src="../requirejs/require.js"></script>
<script src="../js/require.config.js"></script>
<script src="../js/index.js"></script>
</html>目录结构如下
重新用浏览器打开index/index.html，然后会发现浏览器控制台报错： 项目根目录/index/jquery/jquery-1.11.2.js net::ERR_FILE_NOT_FOUND, 当然require.config.js中加载的其他的模块也找不到了。所以说，require.config.js中的baseUrl: "."表示的是当前根目录为index.html所在的目录。如果现在的目录结构想要正确的加载模块，那么修改成baseUrl:"../"就可以了。
四、director进行路由
index.js内容如下。
require(['jquery', 'knockout', 'director'],function ($,ko){
window.addRouter = function(path, func) {
var pos = path.indexOf('/:');
var truePath = path;
if (pos != -1)
truePath = path.substring(0,pos);
func = func || function {
var params = arguments;
initPage('pages' + truePath, params);
}
var tmparray = truePath.split("/");
if(tmparray[1] in router.routes && tmparray[2] in router.routes[tmparray[1]] && tmparray[3] in router.routes[tmparray[1]][tmparray[2]]){
return;
}else{
router.on(path, func);
if (pos != -1)
router.on(truePath, func);
}
}
window.router = Router;
$(function{
addRouter("/pie/pie");
addRouter("/pie2/pie");
addRouter("/dashBoard/board");
window.router.init;
});
function initPage(p, id) {
var module = p;
requirejs.undef(module);
require([module], function(module) {
ko.cleanNode($('#content')[0]);
$('#content').html('');
$('#content').html(module.template);
if(module.model){
ko.applyBindings(module.model, $('#content')[0]);
module.init(id);
}else{
module.init(id, $('#content')[0]);
}
})
}
});index.js中，定义了addRouter函数，这个函数主要是用来添加路由，首先判断有没有被添加过，然后为每一个路由指定一个回调函数，回调函数会调用我们的initPage方法，通过require加载我们定义好的模块。
我们的pages目录下有3个定义好的模块，如下。
五、index.html中配置路由url
在index.html添加url路径信息，如下。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>widget</title>
<meta charset="utf-8" />
</head>
<body>
<div style="float: left; width:15%; margin-top: 50px;">
<div class='card-holder'>
<div class='card-wrapper'>
<a href='#/pie/pie'>
<div class='card bg-01'>
<span class='card-content'>普通图表</span>
</div>
</a>
</div>
<div class='card-wrapper'>
<a href='#/pie2/pie'>
<div class='card bg-02'>
<span class='card-content'>嵌套环形图</span>
</div>
</a>
</div>
<div class='card-wrapper'>
<a href='#/dashBoard/board'>
<div class='card bg-03'>
<span class='card-content'>开车开车</span>
</div>
</a>
</div>
</div>
</div>
<div id="content" style="float: left; width: 75%; margin-top: 50px;">
<h1 style="text-align: center;">欢迎使用ECharts！</h1>
</div>
</body>
<script src="requirejs/require.js"></script>
<script src="js/require.config.js"></script>
<script src="js/index.js"></script>
</html>index.js执行之后会将路由注册到director中的Router中，用户点击链接，比如<a href='#/pie/pie'>，就会触发 /pie/pie 这个路由对应的回调方法，回调方法中会执行initPage('pages' + truePath, params)， truePath="/pie/pie"，接着require就会完成加载pages/pie/pie.js（自定义模块），接下来看看我们自定模块的内容。
六、自定模块（echart-饼图）
pages/pie/pie.js内容如下。
define(['jquery', 'knockout', 'text!pages/pie/pie.html', 'echarts'], function($, ko, template, echarts){
var viewModel = {
pieData: ko.observableArray([]),
setData: function(data){
this.pieData(data);
},
viewPie: function{
//提取name
var names = ;
for(var val of this.pieData)
names.push(val.name);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: names
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: this.pieData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
},
load: function{
var self = this;
$.ajax({
type: 'post',
url: 'pages/pie/data.txt',
dataType: 'json',
success: function(data){
self.setData(data.pieData);
self.viewPie;
},
error: function(data){
alert("error: " + JSON.stringify(data));
}
});
}
}
var init = function{
viewModel.load;
}
return {
'model' : viewModel,
'template' : template,
'init' : init
};
});自定义模块中，require会加载jquery（调用ajax加载数据），knockout（数据绑定），text（需要渲染的html页面），echarts（图表展示），最后的return返回的对象会在index.js中initPage方法通过require被加载并调用。
七、异常处理
在用jquery的ajax请求本地资源时，可能会出现 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource。
解决方法：给浏览器传入启动参数（allow-file-access-from-files），允许跨域访问。Windows下，运行（CMD+R）或建立快捷方式："C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --allow-file-access-from-files
八、完整demo
相关推荐
- Protel电路设计常用设计编辑器案例2——创建元件
-
#大有学问#今天介绍一下Protel常用设计编辑器的电气连接工具栏。单击主工具栏上的工具按钮或选择【查看】|【工具栏】|【配线工具栏】菜单命令可以关闭或打开【电气连接(WiringTools)】工具...
- Protel调整元器件的位置(1)——移动和对齐元器件
-
今天介绍调整元器件位置的方法。首先介绍移动和对齐元器件的方法。在绘制电路原理图时，放置完了的电路图可能位置不太合适，需要进行移动。原理图中的所有对象都可以被移动，移动方法相似。对于元器件的移动来说又分...
- 电路仿真软件详谈(八)，proteus电路仿真软件和protel的区别
-
电路仿真软件是常用工具类型之一，proteus更是电路仿真软件中的佼佼者。但是对于proteus电路仿真软件和protel，二者总是被弄混淆。例如，protel是电路仿真软件吗?proteus电路仿真...
- PCB文件转换生产文件Protel 99SE_pcb格式转换
-
为何要将PCB文件转换为GERBER文件和钻孔数据？因为GERBER文件是一种国际标准的光绘格式文件，它包含RS-274-D和RS-274-X两种格式，其中RS-274-D称为基本GERBER格式，并...
- PCB设计项目教程 -PDF_pcb设计作品
-
PCB设计项目教程》及相关PCB设计教材详细介绍：一、核心教材《PCB设计项目教程》该教材由徐凯、王威担任主编，于2017年由北京理工大学出版社出版。其采用“项目导向、任务驱动”的教学模式，...
- 最受欢迎的pcb设计软件Protel99se到底怎么样?
-
Protel99se是一款国内非常实用且流行的设计行业的pcb设计软件，其由pcb原理图设计和多层板电路设计两大功能组成，其最大的特点是好获取，在网上可以随便的找到，且Protel99se软件适用于w...
- 人人都是网络雇佣兵，一种基于路由器的ddos平台设计思路
-
本文灵感来自于三个方面优酷路由宝，迅雷宝这种路由器流量兑现方式Anonymous匿名者的ddos方式传统木马ddos方案先说路由宝迅雷宝，这种以用户网络为节点的CDN网络中，会传输大量的流量，我上月优...
- 接口性能测试工具Locust介绍_接口和性能的测试要点
-
接口性能测试工具其实挺多的，小型有apache的ab工具，大型的有Jmeter、Locust......这里要介绍的是Locust，相对于Jmeter进行了比较完善的封装，Locust可以就显的更自...
- 华硕笔记本电脑安装系统实战心得体会
-
故障:某某的电脑叫人安装系统至一半就蓝屏死机.拿来给我安装,发现光驱无效,不能用光盘安装.电脑启动蓝屏.解决方法:用了半天时间安装也出现类似问题.后来考虑用U盘来装.1.首先制作U盘系统,把U盘资...
- dos命令systeminfo图文教程，显示操作系统配置信息msinfo32
-
大家好，我是老盖，首先感谢观看本文，本篇文章做的有视频，视频讲述的比较详细，也可以看我发布的视频。今天我们学习systeminfo命令，该工具显示本地或远程机器(包括服务包级别)的操作系统配置的信息，...
- 玩家展示现代硬件上运行的MS-DOS 拥有令人难以置信的向后兼容性
-
一位YouTuber展示了在现代计算机硬件上直接运行古老的MS-DOS操作系统和经典游戏的能力。这段视频由YouTuberInkbox发布，向观众展示了如何启动古老的、前Windows...
- 比微PE还干净还强大，带网络:USBOS V3.0超级PE装机工具20221031
-
期待已久的USBOSV3.0超级PE装机工具20221031又和大家见面了，用过的朋友都知道他的确很强大，对于新旧电脑的支持很好，目前为止还没有电脑不支持的，包括苹果PC。很多朋友还在用诸如大白菜、...
- 大童保险李晓婧:保险的本位是风险管理应在四方面进行建设
-
经济观察网记者姜鑫5月17日，大童保险服务宣布升级了风险管理模式，推出DOSM（DemandOriented，SolutionModel）需求导向型解决方案5.0版本。新解决方案从原有“六位...
- DOS常用命令及简介_dos常用命令大全及用法
-
DOS是英文DiskOperatingSystem的缩写，意思是“磁盘操作系统”。我是在95年开始学的电脑，当时学校的机房里，还没有一台WINDOWS操作系统的电脑，当时都是用DOS、UC-DOS...
- Windows 忘记开机密码?不用任何工具，1招轻松破解
-
出现忘记Windows密码的情况，概率有多大？对此，小电只能回答忘记开机密码的情况，说来就来，没有规律，也不会提前告诉你一声~而忘记Windows开机密码的时候，很多朋友都会想起可以使用u盘启动盘来破...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)