将下载的包解压，再将包内文件copy到C:\inetpub\wwwroot下

在html中做如下引用：

<script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script>

注意：：

下面这句在操作图表的script标签内

require.config({

paths: {

echarts: "http://localhost/echarts/build/source" //echarts.js的路径C:\inetpub\wwwroot\echarts\build\source

//'echarts/chart/line': './js/echarts'

}

});

完整如下

 

 

测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>ECharts-基本线性图及其配置要求</title>

    <!--<script src="js/esl.js" type="text/javascript"></script>-->

    <script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script>

</head>

<body>

    <div id="main" style="height: 400px; width:800px; border: 1px solid #ccc; padding: 10px;">

    </div>

    <script type="text/javascript" language="javascript">

        // 按需加载

        // Step:3 conifg ECharts's path, link to echarts.js from current page.

        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径

        require.config({

            paths: {

                echarts: "http://localhost/echarts/build/source"

            }

        });

        require(

        [

            'echarts',

            'echarts/chart/line'//在这引用自己要用的包即可

        ],

        DrawEChart

        );

        //渲染ECharts图表

        function DrawEChart(ec) {

            //图表渲染的容器对象

            var chartContainer = document.getElementById("main");

            //加载图表

            var myChart = ec.init(chartContainer);

            myChart.setOption({

                //图表标题

                title: {

                    text: "ECharts简单线形图表及其配置展示实例", //正标题

                    link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开

                    x: "center", //标题水平方向位置

                    subtext: "From:http://www.stepday.com", //副标题

                    sublink: "http://www.stepday.com", //副标题链接

                    //正标题样式

                    textStyle: {

                        fontSize: 24

                    },

                    //副标题样式

                    subtextStyle: {

                        fontSize: 12,

                        color: "red"

                    }

                },

                //数据提示框配置

                //tooltip: {

                //    trigger: 'axis' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框

                //},

                //图例配置

                legend: {

                    data: ['蒸发量', '降水量'], //这里需要与series内的每一组数据的name值保持一致

                    y: "bottom"

                },

                //工具箱配置

                toolbox: {

                    show: true, //是否显示工具箱

                    feature: {

                        mark: false, // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部

                        dataView: { readOnly: false }, // 数据视图，上图icon左数8，打开数据视图

                        magicType: ['line', 'bar'],      // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图

                        restore: true, // 还原，复位原始图表，上图icon左数9，还原

                        saveAsImage: true  // 保存为图片，上图icon左数10，保存

                    }

                },

                calculable: true,

                //轴配置

                xAxis: [

                        {

                            type: 'category',

                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

                            name: "月份"

                        }

                ],

                //Y轴配置

                yAxis: [

                        {

                            type: 'value',

                            splitArea: { show: true },

                            name: "数值"

                        }

                ],

                //图表Series数据序列配置

                series: [

                        {

                            name: '蒸发量',

                            type: 'line',

                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

                        },

                        {

                            name: '降水量',

                            type: 'line',

                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

                        }

                ]

            });

        }

    </script>

</body>

</html>

ECharts本地部署的更多相关文章

  1. echarts的部署和使用

    echarts是百度开发的一款商业级.开源免费的前端图表组件,具体可访问其主页:http://echarts.baidu.com/ echarts目前已经发布了2.0版本,使用起来非常的方便,并且效果 ...

  2. 本地部署arcgis by eclipse

    首次来博客园发帖,从本地部署arcgis api开始吧: 首先还是下载arcgis的api包开始,在中国区官网下载arcgis包: 1.http://support.esrichina.com.cn/ ...

  3. ArcGIS server开发之API for js 本地部署

    ArcGIS Server for javascript 本地部署 第一次使用arcgis server for js开发,在经验方面还有很多的不足,所以将自己在开发过程中遇到的问题写出来与大家共享. ...

  4. Exceptionless 本地部署

    免费开源分布式系统日志收集框架 Exceptionless 前两天看到了这篇文章,亲身体会了下,确实不错,按照官方的文档试了试本地部署,折腾一番后终于成功,记下心得在此,不敢独享. 本地部署官方wik ...

  5. ArcGIS JavaScript API本地部署离线开发环境[转]

    原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...

  6. Exceptionless 本地部署踩坑记录

    仅已此文记录 Exceptionless 本地部署所遇到的问题 1.安装ElasticSearch文本 执行elasticsearch目录中的elasticsearch.bat 没有执行成功. 使用命 ...

  7. jsbin本地部署

    jsbin 本地运行 1.首先安装node.js,下载地址http://nodejs.org/ 安装完成后,使用node.js安装jsbin,如下:进入node环境,执行下面语句: $ npm ins ...

  8. 解决fiddler无法抓取本地部署项目的请求问题

    在本地部署了几个应用,然后想用fiddler抓取一些请求看看调用了哪些接口,然鹅,一直抓不到... 比如访问地址是这样的: 在网上搜罗半天,找到一个解决方法 在localhost或127.0.0.1后 ...

  9. ArcGIS API for JavaScript 4.x 本地部署之Apache(含Apache官方下载方法)

    IIS.Nginx都说了,老牌的Apache和Tomcat也得说一说(如果喜欢用XAMPP另算) 本篇先说Apache. 安装Apache 这个...说实话,比Nginx难找,Apache最近的版本都 ...

随机推荐

  1. 解决ubuntu字体发虚，网页字体发虚

    好吧,哥也不知所以然,只是突然间所有东西的字体都发虚了~~后来发现是应该是语言支持搞的鬼,卸载掉下面的东东就没事了 sudo apt-get remove fonts-arphic-ukai ttf- ...

  2. cocos2dx中使用声音引擎需要包含的头文件

    1.需要包含的头文件和命名空间 #include "SimpleAudioEngine.h"using namespace CocosDenshion;

  3. VBS基础篇 - 常用函数

    Option Explicit '*********************************Date/Time函数******************************* 'CDate函 ...

  4. 单元测试篇----cppUnit的安装与使用

    在刚学习单元测试章节的时候,尝试着使用dev—c++来编译cppunit,但一直没成功,也尝试问过同学,一直没有很好的方法,因此浪费了不少时间.今天又耐心的尝式一下,意外成功了.以下是详细的安装步骤: ...

  5. 【VS2012】项目文件夹管理

    项目中添加文件夹 " 项目"显示所有文件 在"显示所有文件"的情况下,可以创建文件件 "新建文件夹"需要添加到物理路径中时,可以选择&quo ...

  6. struct{0}二

    一直以为 ]={};是把a的所有元素初始化为0,]={};是把a所有的元素初始化为1. 调试的时查看内存发现不是那么一回事,翻了一下<The C++ Programming Language&g ...

  7. tcp 多线程与多进程调用close

    http://blog.csdn.net/russell_tao/article/details/13092727 大家知道,所谓线程其实就是“轻量级”的进程.创建进程只能是一个进程(父进程)创建另一 ...

  8. sigaction 函数

    本文主要参考<unix环境高级编程>   sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作).   int sigaction(int signo,con ...

  9. ObjC的Block中使用weakSelf/strongSelf @weakify/@strongify

    首先要说说什么时候使用weakSelf和strongSelf. 下面引用一篇博客<到底什么时候才需要在ObjC的Block中使用weakSelf/strongSelf>的内容: Objec ...

  10. ASP.NET的一套笔试题

    1.    自定义控件如何做?答:自定义控件,跟HtmlControl或WebControl相似,编译后可以添加引用到工具栏里面,直接用鼠标拖动使用.2.界面的布局?答:表格,div3.程序的执行过程 ...