ECharts本地部署
将下载的包解压，再将包内文件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本地部署的更多相关文章
- echarts的部署和使用
echarts是百度开发的一款商业级.开源免费的前端图表组件,具体可访问其主页:http://echarts.baidu.com/ echarts目前已经发布了2.0版本,使用起来非常的方便,并且效果 ...
- 本地部署arcgis by eclipse
首次来博客园发帖,从本地部署arcgis api开始吧: 首先还是下载arcgis的api包开始,在中国区官网下载arcgis包: 1.http://support.esrichina.com.cn/ ...
- ArcGIS server开发之API for js 本地部署
ArcGIS Server for javascript 本地部署 第一次使用arcgis server for js开发,在经验方面还有很多的不足,所以将自己在开发过程中遇到的问题写出来与大家共享. ...
- Exceptionless 本地部署
免费开源分布式系统日志收集框架 Exceptionless 前两天看到了这篇文章,亲身体会了下,确实不错,按照官方的文档试了试本地部署,折腾一番后终于成功,记下心得在此,不敢独享. 本地部署官方wik ...
- ArcGIS JavaScript API本地部署离线开发环境[转]
原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...
- Exceptionless 本地部署踩坑记录
仅已此文记录 Exceptionless 本地部署所遇到的问题 1.安装ElasticSearch文本 执行elasticsearch目录中的elasticsearch.bat 没有执行成功. 使用命 ...
- jsbin本地部署
jsbin 本地运行 1.首先安装node.js,下载地址http://nodejs.org/ 安装完成后,使用node.js安装jsbin,如下:进入node环境,执行下面语句: $ npm ins ...
- 解决fiddler无法抓取本地部署项目的请求问题
在本地部署了几个应用,然后想用fiddler抓取一些请求看看调用了哪些接口,然鹅,一直抓不到... 比如访问地址是这样的: 在网上搜罗半天,找到一个解决方法 在localhost或127.0.0.1后 ...
- ArcGIS API for JavaScript 4.x 本地部署之Apache(含Apache官方下载方法)
IIS.Nginx都说了,老牌的Apache和Tomcat也得说一说(如果喜欢用XAMPP另算) 本篇先说Apache. 安装Apache 这个...说实话,比Nginx难找,Apache最近的版本都 ...
随机推荐
- < java.lang >-- StringBuffer字符串缓冲区
构造一个其中不带字符的字符串缓冲区,初始容量为 16 个字符. 特点: 1:可以对字符串内容进行修改. 2:是一个容器. 3:是可变长度的. 4:缓冲区中可以存储任意类型的数据. 5:最终需要变成字符 ...
- win32 sdk显示一个载入的位图的方法
注:整理自网络文档 (1)加载位图 HANDLE LoadImage(HINSTANCE 来源实体,LPCTSTR 名称,UINT 位图类型, int 加载宽度,int 加载高度,UINT 加载方式) ...
- Hadoop TextInputFormat源码分析
from:http://blog.csdn.net/lzm1340458776/article/details/42707047 InputFormat主要用于描述输入数据的格式(我们只分析新API, ...
- Xamarin.Android之山有木兮之木有枝，心悦君兮君不知。
Xamarin.Android之山有木兮之木有枝,心悦君兮君不知. 第一步,写项目中的第一个界面. <?xml version="1.0" encoding =" ...
- 查看JVM内存
你知道如何进行JVM内存查看,这里和大家分享几个JVM内存查看方法,希望对你的学习有所帮助,通常情况下可以用代码查看,也可以在eclipse中增添相关信息后直接查看. JVM内存查看方法 可以用代码查 ...
- dp--poj1458最长公共子序列
很水的一题 输入串a与串b: Dp[i][j]表示a串中1~i与b串中1~j的子串的最长公共子序列. Max{dp[i-1][j], dp[i][j-1]} (a[i]!=b[j]) Dp ...
- 【BZOJ】【3210】花神的浇花集会
曼哈顿距离与切比雪夫距离 QAQ蒟蒻并不知道切比雪夫距离是什么……并不会做这道题…… 去膜拜了PoPoQQQ大爷的题解: 题目大意:给定平面上的n个点,求一个点到这n个点的切比雪夫距离之和最小 与31 ...
- 【BZOJ】【1023】【SHOI2008】cactus仙人掌图
DP+单调队列/仙人掌 题解:http://hzwer.com/4645.html->http://z55250825.blog.163.com/blog/static/150230809201 ...
- 【BZOJ】【1001】 【BJOI2006】狼抓兔子
平面图最小割->对偶图最短路 平面图最小割转对偶图最短路= = 想到了就比较好写了…… 可能是我对区域的标号方式比较奇特?反正我没有特判n==1||m==1也能过2333(机智吧-(滚开啦你个自 ...
- tomcat错误：@HandlesTypes annotation of one or more ServletContentInitializers
项目在别人的机器上运行正常,但是在自己机器上运行出现该错误,所以判断应该是环境配置的问题,通过更换eclipse.更换jdk.更换maven.更换tomcat的不同版本,最终确认是tomcat的问题. ...