echarts的部署和使用
echarts是百度开发的一款商业级、开源免费的前端图表组件，具体可访问其主页：http://echarts.baidu.com/
echarts目前已经发布了2.0版本，使用起来非常的方便，并且效果强大。这里简单记下echarts如何使用及本地部署情况。
注：早期的版本为了使用echarts还要下载一个名为zender的canvas库，而echarts-2.0.1集成了zender，所以大家无需再单独下载zender。
1.下载echarts-2.0.1
echarts最新可用的版本下载地址：http://echarts.baidu.com/build/echarts-2.0.1.zip，下载解压后如下：
该zip包是echarts完整的说明文档和echarts源程序，之前没接触过的同学可以打开index.html了解一下（当然这些内容在其在线主页上也能看到）。
2.下载esl.js
esl.js是echarts的加载器，用来初始化和配置echarts，下载地址：http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js
*下载到本地的esl.js本身对路径没什么要求，不过我还是按照url创建了本地路径ecom/esl/1-6-10/esl.js，所以后面的引用上我用的是这个路径。
3.部署echarts
其实很简单，就是把刚才下载echarts-2.0.1包内的build文件夹和刚才下载的esl.js放在一个目录下即可，如图：
其中，test.html是我从echarts主页上复制下来的一个示例程序，该程序是一个地图型(map)数据呈现图表。在此，拿来验证本地部署的情况。
test.html代码我也在此贴一下：
<!DCOTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts testing page</title>
<script src="./ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script type="text/javascript">
require.config({
paths:{
"echarts":"build/echarts",
"echarts/chart/map":"build/echarts-map"
}
}); //using
require(
[
"echarts",
"echarts/chart/map"
],
function(ec){
var myChart=ec.init(document.getElementById("main"));
var option = {
title : {
text: 'iphone销量',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['iphone3','iphone4','iphone5']
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
}
]
}; //loading data
myChart.setOption(option);
}
);
</script>
</body>
</html>
打开浏览器（chrome），看下这个页面显示如何：
看看，效果不错吧。另外，echarts几乎支持所有常见的图表模型，想了解更多可自行访问echarts主页。
本文使用的环境配置也打包好了，如有需要可点击下载：点我下载！
PS：echarts在网页内的的初始化和配置可查看贴出的test.html的script部分，略微思考下想必就能明白。
如果你测试的时候发现图表显示不出来那多半问题是路径没有配置对。
echarts的部署和使用的更多相关文章
- ECharts本地部署
将下载的包解压,再将包内文件copy到C:\inetpub\wwwroot下 在html中做如下引用: <script type="text/javascript" sr ...
- 使用echarts开发电子屏数据展示页面
背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
- 子沐代码段——Flask+Mysql+Echarts可视化
前言 子沐不久前,使用Scrapy爬取了智联招聘的职位数据,并部署到服务器上,设置了定时任务.数据量日益庞大.子沐在想,数据不过只是存在数据库里,并没有什么意义,所以子沐萌发一个想法,那就是做一个可视 ...
- ECharts组件应用样例代码
一.从Echarts官网上下载最新版本组件 Echarts是百度开发的开源Web图表组件,界面美观,使用简单.组件下载地址:http://echarts.baidu.com/echarts2/doc/ ...
- Nginx+uwsgi+Django 的web应用环境部署-完整记录
Python作为当前最火爆最热门,也是最主要的Web开发语言之一,在其二十多年的历史中出现了数十种Web框架,比如Django.Tornado.Flask.Twisted.Bottle和Web.py等 ...
- echarts初探：了解模块化
什么是echarts?这是官网:http://echarts.baidu.com/ 简单的说就是百度提供的一些画图表的库,用它你可以简便的画出一些你想要的图表效果. 虽然蛮好用的,但对于不知道模块化的 ...
- 流量分析系统----讲解-echarts模拟迁移(结合china.js)
百度 Echarts 地图->模拟迁徙,实现自动切换地图 小航哥注释: 1.本文主要是把模拟迁移的流程讲了一遍,讲的很好.具体实现参考航哥这篇随笔“流量分析系统----实现-echarts模拟迁 ...
- Echarts 异步数据加载遇到的问题
看了Echarts官网异步加载数据的Demo var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 ...
- ELK6.3.2+filebeat部署过程
ELK安装部署 elk作为公司的日志收集检索的方案的首选,是必要的工具,下面介绍一下elk的安装部署方法,以及一些报错的解决方法:(使用的是ubuntu16.04,jdk使用1.8,ELK的版本为6. ...
随机推荐
- chroot jail
注意,原标题是:Linux Virtualization using Chroot Jail,我实在不知道怎么翻译,所以,自作主张,选了chroot jail作为标题.原文地址 chroot jail ...
- Reverse Integer 2015年6月23日
题目: Reverse digits of an integer. Example1: x = , return Example2: x = -, return - 思路:递归 解答: / test ...
- progressBar的使用
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- （入门篇 NettyNIO开发指南）第三章-Netty入门应用
作为Netty的第一个应用程序,我们依然以第2章的时间服务器为例进行开发,通过Netty版本的时间服务报的开发,让初学者尽快学到如何搭建Netty开发环境和!运行Netty应用程序. 如果你已经熟悉N ...
- 详解Struts2拦截器机制
Struts2的核心在于它复杂的拦截器,几乎70%的工作都是由拦截器完成的.比如我们之前用于将上传的文件对应于action实例中的三个属性的fileUpload拦截器,还有用于将表单页面的http请求 ...
- JMeter-MyEclipse编译运行问题（Could not read JMeter properties file）
JMeter-MyEclipse编译运行问题按照 此贴 http://phoenix0529.iteye.com/blog/1530728 进行配置,然后用Ant编译Build.xml 是可以的. 但 ...
- mysql5.6创建新用户并给授权指定的数据库权限
一.环境: CentOS 6.8 mysql 5.6 二.背景 给外包的工作人员提供我司某台服务器的 mysql 中某个数据库的访问权限. 之所以要做限制,是防止他们对我司其他的数据库非法进行操作. ...
- 10分钟学会JAVA注解（annotation）
(原) 先认识注解(Annotation) 定义类用class,定义接口用interface,定义注解用@interface 如public @interface AnnotationTest{} 所 ...
- 写给Android App开发人员看的Android底层知识（7）
(十二)ContentProvider (1)ContentProvider是什么? ContentProvider,简称CP. 做App开发的同学,尤其是电商类App,对CP并不熟悉,对这个概念的最 ...
- VR全景：vr元年过后，这些企业如何发动“vr+”应用引擎?
2016年,VR可谓是四处衍生.从如痴如迷的游戏行业到喜闻乐见的影视行业,再到医疗.军事.房地产,随便呼出一个"+",VR便能左右逢源,VR+各行各业,俨然成为一种标配.最近,Ma ...