knockout+echarts实现图表展示

一、需要学习的知识

  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

  https://github.com/hjzgg/knockout-and-echart

时间: 2024-10-13 09:14:56

knockout+echarts实现图表展示的相关文章

基于echarts实现图表展示

[Author]: kwu 1.引用相关的js框架 <pre name="code" class="javascript"><script type="text/javascript" src="js/esl/esl.js"></script> <script type="text/javascript" src="js/echarts.js"&

06 springboot+ECharts完成信件数据图表展示

项目结构: 源码略微修改再上传,下面看看需求. 需求: 需求一:分析每年的信件数量,通过Echarts折线图展示出来.需求二:分析信件是属于投诉和咨询的比例,通过Echarts饼图展示出来.需求三:分析各个政府部门对信件的回答数量,通过Echarts柱状图展示出来. 一:每年的信件数量 二:信件是属于投诉,咨询和建议的比例 三,各个政府部门对信件的回答数量(取前七名) 原文地址:https://www.cnblogs.com/xcl666/p/12275335.html

echarts创建图表

Echarts是一个图表插件,可以用在做一些统计图 如:折线图 还有柱状图 我们在工作中有时会用到图表来展示数据 我们一起来学学echarts这个图表插件吧^_^ 第一步:下载插件包 下载地址:http://echarts.baidu.com/index.html 下载好后,我们就来开始使用这个插件了 第二步:创建html文档并引入插件的文件 第三步:创建容器,并设置高度 第四步:在新建一个script用来写js代码 第五步:配置文件包的路径(因为后面要使用包里的东西,所以需要先设置路径) 现在

【Echarts】图表用echarts【待完善】

echarts是做数据统计. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化. 最近接触到了Echarts这个JavaScript图表库,感觉已

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ?Copyright 蕃薯耀 2017年5月5日 http://www.cnblogs.com/fanshuyao/ 做了个柱状图的报表,如下: 但是图和下面的表格没有对齐,需要

第2章 用图表展示数据

2.1 用图表表示定性数据 1.频数分布表 对数据进行分类,列出所有的类别,然后统计每一类别的频数. 频数:频数分布表中落在某一特定类别的数据个数叫做频数. 有两个变量交叉分类的频数分布表称为列联表,也称交叉表. 定性数据,除了用频数分布表,还可以使用比例.百分比.比率等统计量进行描述. 比例:一个样本中各类别的频数与全部频数之比,通常用于反映样本的构成或结构. 百分比:将样本乘以100得到的数值称为百分比. 比率:样本(或总体)中各不同类别频数之间的比值. 定性数据的图示:条形图.帕累托特图.

智销功能_图表展示

什么是报表 向上级报告情况的表格.简单的说:报表就是用表格.图表等格式来动态显示数据,可以用公式表示为: “报表 = 多样的格式 + 动态的数据 表格:详细数据 图表: 直观 图表展示 两种技术:flash(actionscript),h5(画布) flash缺点:不安全,容易崩溃 IE的话只能是flash的方式 两个框架:highchart(收费,支持IE),echart(百度,开源免费) 前端使用 1引入相应的js <!-- 引入highcharts的js支持 --> <script

android 中图表展示的实现——echarts方式实现

android 中想要实现图表的展示,非常麻烦.网上查了一下实现方案,无非三种: 1.自己写画布,慢慢实现,要求太高,很难搞定. 2.用AchartEngine实现,丑陋,而且扩展性很小. 3.采用webview加载js的方式,虽然理论上会比较耗费资源,但是效果不错,而且难度小很多. 下面以一个例子具体介绍依稀这种方式: 首先布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

通过百度echarts实现数据图表展示功能

现在我们在工作中,在开发中都会或多或少的用到图表统计数据显示给用户.通过图表可以很直观的,直接的将数据呈现出来.这里我就介绍说一下利用百度开源的echarts图表技术实现的具体功能. 1.对于不太理解echarts是个怎样技术的开发者来说,可以到echarts官网进行学习了解,官网有详细的API文档和实例供大家参考学习. 2.以下是我在工作中实现整理出来的实例源码: 公用的支持js文件 echarts.js.echarts.min.js,还有其他的图表需要支持的js文件也可以到官网下载 echa