echarts的部署和使用
2024-04-11 18:59:56
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部分，略微思考下想必就能明白。
如果你测试的时候发现图表显示不出来那多半问题是路径没有配置对。
最新文章
- 前端学HTTP之基本认证
- linux下创建文件与目录时默认被赋予了什么样的权限?
- Python [Leetcode 344]Reverse String
- 【CSS3】---first-of-type选择器+nth-of-type(n)选择器
- mysql 游标嵌套循环实例
- 是什么让我想到开发NFinal
- （Problem 57）Square root convergents
- 利用GUID唯一标识符并设置它的过期时间
- Ajax模拟Form表单提交，含多种数据上传
- 微信小程序出现 Expecting 'STRING','NUMBER','NULL','TRUE','FALSE','{','[', got INVALID
- C++版 - 剑指offer之面试题37：两个链表的第一个公共结点[LeetCode 160] 解题报告
- Mac 常用的快捷键
- String对象的属性和方法
- s6-6 TCP 连接释放
- https 建立连接过程
- mac 上如何安装非app store上的下载的软件-------打开未知来源
- SQL Server 递归查询上级或下级组织数据（上下级数据通用查询语法）
- JS 中对变量类型判断的几种方式
- 题解——loj6279 数列分块入门3 （分块）
- Effective Java Chapter4 Classes and Interface