knockout+echarts实现图表展示
一、需要學(xué)習(xí)的知識(shí)
knockout, require, director, echarts, jquery。簡單的入一下門，網(wǎng)上的資料很多，最直接就是進(jìn)官網(wǎng)校習(xí)。
二、效果展示
三、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"} });當(dāng)前項(xiàng)目目錄結(jié)構(gòu)如下。
沒有配置路由的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>這樣，所有的模塊都是可以被找到被加載的。
現(xiàn)在改變一些目錄結(jié)構(gòu)，在根目錄下新建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>目錄結(jié)構(gòu)如下
重新用瀏覽器打開index/index.html，然后會(huì)發(fā)現(xiàn)瀏覽器控制臺(tái)報(bào)錯(cuò)：?項(xiàng)目根目錄/index/jquery/jquery-1.11.2.js net::ERR_FILE_NOT_FOUND, 當(dāng)然require.config.js中加載的其他的模塊也找不到了。所以說，require.config.js中的baseUrl: "."表示的是當(dāng)前根目錄為index.html所在的目錄。如果現(xiàn)在的目錄結(jié)構(gòu)想要正確的加載模塊，那么修改成baseUrl:"../"就可以了。
四、director進(jìn)行路由
index.js內(nèi)容如下。
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函數(shù)，這個(gè)函數(shù)主要是用來添加路由，首先判斷有沒有被添加過，然后為每一個(gè)路由指定一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)會(huì)調(diào)用我們的initPage()方法，通過require加載我們定義好的模塊。
我們的pages目錄下有3個(gè)定義好的模塊，如下。
五、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'>嵌套環(huán)形圖</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執(zhí)行之后會(huì)將路由注冊(cè)到director中的Router中，用戶點(diǎn)擊鏈接，比如<a href='#/pie/pie'>，就會(huì)觸發(fā)?/pie/pie 這個(gè)路由對(duì)應(yīng)的回調(diào)方法，回調(diào)方法中會(huì)執(zhí)行initPage('pages' + truePath, params)，?truePath="/pie/pie"，接著require就會(huì)完成加載pages/pie/pie.js（自定義模塊），接下來看看我們自定模塊的內(nèi)容。
六、自定模塊（echart-餅圖）
pages/pie/pie.js內(nèi)容如下。
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(){//提取namevar names = [];for(var val of this.pieData())names.push(val.name);// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title : {text: '某站點(diǎn)用戶訪問來源',subtext: '純屬虛構(gòu)',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"},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會(huì)加載jquery（調(diào)用ajax加載數(shù)據(jù)），knockout（數(shù)據(jù)綁定），text（需要渲染的html頁面），echarts（圖表展示），最后的return返回的對(duì)象會(huì)在index.js中initPage（）方法通過require被加載并調(diào)用。
七、異常處理
在用jquery的ajax請(qǐng)求本地資源時(shí)，可能會(huì)出現(xiàn)?Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource。
解決方法：給瀏覽器傳入啟動(dòng)參數(shù)（allow-file-access-from-files），允許跨域訪問。Windows下，運(yùn)行（CMD+R）或建立快捷方式："C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --allow-file-access-from-files
八、完整demo
https://github.com/hjzgg/knockout-and-echart
?
轉(zhuǎn)載于:https://www.cnblogs.com/hujunzheng/p/5672463.html
總結(jié)
以上是生活随笔為你收集整理的knockout+echarts实现图表展示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 因加油站放了油管怎么处理
- 下一篇： 机油一般加多少升机汩上？