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. ...
随机推荐
- .NET中webservice如何使用，调用
webservice 只是"面向服务"编程的一种方式,现在把所有的方式都合在一起,就叫做WCF,,,,,, 1.创建 webservice服务,在web项目中添加"web ...
- 025 hibernate悲观锁、乐观锁
Hibernate谈到悲观锁.乐观锁,就要谈到数据库的并发问题,数据库的隔离级别越高它的并发性就越差 并发性:当前系统进行了序列化后,当前读取数据后,别人查询不了,看不了.称为并发性不好 数据库隔离级 ...
- struts2.1.6教程一、准备工作及实例
1.解压struts-2.1.6-all.zip apps目录:struts2自带的例子程序 docs目录:官方文档. lib 目录:存放所有jar文件. Src 目录:源文%件存放地 2.六个基本包 ...
- 关于EF中直接执行sql语句的参数化问题
某天 , 在review项目中代码的时候, 发现有哥们直接通过 Database.ExecuteSqlCommand("select * from order_info where com ...
- meta标签属性总结
一.常见name属性.不同参数含义 meta标签的name属性语法格式是: <meta name="参数" content="具体的参数值"> 其中 ...
- MyBatis双数据源配置
配置相关 jdbc 配置 #============================================================================ # MySQL # ...
- MySQL主从搭建
主服务器配置 1.编辑配置文件 # 如果不存在,就手动创建一个 vim /etc/my.cnf 在配置文件加入如下值: [mysqld] # 唯一的服务辨识号,数值位于 1 到 2^32-1之间. # ...
- gulp+browserSync自动刷新页面
BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...
- Linux获取UUID
Linux内核提供有UUID生成接口: cat /proc/sys/kernel/random/uuid Linux上一切皆文件,不管什么程序,读取文件就能获取一个UUID.
- CentOS升级Python2.7导致使用pip等命令安装模块失败
报错如下: # pip Traceback (most recent call last): File , in <module> from pkg_resources import lo ...