现在位置首页 / 项目实战 /正文

基于html5、js的超强报表控件Echarts系列教程(2)-使用及环境部署

作者: IT小兵 | 2013年10月14日| 热度:℃ | 评论: |参与:

最近更新了几篇文章。希望大家喜欢:

[Echarts asp.net+ashx项目部署及代码实例(附demo)]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条]

[ECharts--完善的人物关系图-连线点击事件/样式/标注文字及源代码]

[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件]

[ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(1)



昨天分享了[基于html5、js的超强报表控件Echarts系列教程(1)-与其他报表的区别和介绍]的博文,

今天再分享一下,Echarts在asp.net下的部署和简单例子说明。

首先到官方网站下载最新代码:http://ecomfe.github.io/echarts/index.html 

下面后,可以看到所有的代码文件列表:

Echarts使用安装部署

我们主要可以参考doc的demo进行学习和使用。

Echarts使用安装部署

其中asset放置的是css 图片 js文件以及ico图标。

example是实例的html及单文件js模式下的文件。单文件js会有说明。


我们知道,每个项目会有不一样的文件放置要求,比如,我们项目要求:

目录有:

Js、Pages、Css、Image、Usercntrols等。

怎么在asp.net下部署使用Echarts那?

参见下图:

Echarts asp.net

我们在js文件下,建一个echarts文件夹,里面放置了一个文件夹src、echarts-map.js、echarts-original-map.js、

esl.js。

其中,esl.js是必须的。esl.js是什么那?

ESL是一个浏览器端符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

官方网站地址:https://github.com/ecomfe/esl 

这里我们只是用esl.js进行echarts的模块进行加载即可。

这里有2种方式。官方说明的非常明白。

1、 文件引用:就是所有的每个报表Js不直接加载页面中,随你业务需求加载;看到下面的结构就明白了。

Echarts asp.net

可以看到src下面有很多shape,不是每个shape都是我们需要的。不需要的加载页面,只会让页面加载变慢,所以采用模块化加载方式。

也是目前很流行的一种方式。由于echarts依赖底层zrender,建议你同时下载zrender到本地,可参考demo

2 、第二种就是单文件js加载:

build文件夹下已经生成了多个单文件见下,根据你的需求使用:

  • echarts.js : 经过压缩,包含除地图外的全部图表

  • echarts-original.js : 未压缩,可用于调试,包含除地图外的全部图表

  • echarts-map.js : 经过压缩,全图表,包含全国以及34个省市级地图数据

  • echarts-original-map.js : 未压缩,可用于调试,全图表,包含全国以及34个省市级地图数据


在放置好文件后,需要在我们的页面中使用。

你需要如下4步,才可以完成在你的页面使用echarts的目的。

  1. 引入一个模块加载器,如esl.js或者require.js

  2. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)

  3. 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,见上述说明。这里需要特别注意模块化加载的话,需要配置对你的文件路径。

  4. 动态加载echarts然后在回调函数中开始使用

    (容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)

代码实例:

背景:我的echarts目录:\js\echarts\src

我的页面目录:\Page\Stat

1、引入esl.js。monthdata.js是我的逻辑js

	 <script src="../../js/echarts/esl.js"></script> 
    <script src="../../BusinessJs/stat/monthdata.js"></script>

2、在monthdata.js中使用esl.js的模块化加载函数进行配置echarts模块化js的路径

// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
require.config({
    //paths: {
    //    echarts: '../../js/echarts/echarts-original-map',
    //    'echarts/chart/bar': '../../js/echarts',
    //    'echarts/chart/line': '../../js/echarts'
    //}
    packages: [
      {
          name: 'echarts',
          location: '../../js/echarts/src',
          main: 'echarts'
      },
      {
          name: 'zrender',
          location: '../../js/echarts/src/src',// zrender与echarts在同一级目录
          main: 'zrender'
      }
    ]
});

这里必须配置对2个路径:一个是echarts的路径,一个是zrender的路径。

都是相对于你使用的页面的路径!

3、动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径

var echarts;
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
require(
    [
       'echarts',
        'echarts/chart/line',
        'echarts/chart/bar'
        //'echarts/chart/chord',
    ],
    showdatacllback
);
function showdatacllback(ec) {
    echarts = ec;
    GeteData(echarts);
}

showdatacllback是你的回调函数,会将整个echarts对象作为参数传递到你的数据加载和展示函数中。

4、就是加载数据并展示到报表中。加载数据方式很多具体不展示了。参考代码例子。


如此,Echarts的部署和使用就完成了最简单的例子。还有很多复杂应用,我们后续在继续。


转发注明来自:IT分享  http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询