Echarts学习总结(⼀)-----柱状图
简介
ECharts,缩写来⾃Enterprise Charts,商业级数据图表,基于【HTML5】Canvas (ZRender),纯Javascript图表库,是百度的⼀个开源的数据可视化⼯具,业界给予了很多赞誉,这⾥不多说,需要了解详情的同学参见官⽹。我简略看了下,最贴切的地⽅在于本地化⽀持,⽐如对于中国地图的⽀持。
名词解释
基本名词
chart是指⼀个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合⽽成的“混搭”图表,可能包括坐标轴、图例等
axis直⾓坐标系中的⼀个坐标轴,坐标轴可分为类⽬轴和数值轴
xAxis直⾓坐标系中的横轴,通常并默认为类⽬轴
yAxis直⾓坐标系中的纵轴,通常并默认为数值轴
grid直⾓坐标系中除坐标轴外的绘图⽹格
legend图例,表述数据和图形的关联
dataRange值域选择,常⽤于展现地域数据时选择值域范围
dataZoom数据区域缩放,常⽤于展现⼤数据时选择可视范围
toolbox辅助⼯具箱,辅助功能,如添加标线,框选缩放等
tooltip⽓泡提⽰框,常⽤于展现更详细的数据
timeline时间轴,常⽤于展现同⼀组数据在时间维度上的多份数据
series数据系列,⼀个图表可能包含多个系列,每⼀个系列可能包含多个数据
图表名词
line折线图,堆积折线图,区域图,堆积区域图。
bar柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图。
scatter散点图,⽓泡图。散点图⾄少需要横纵两个数据,更⾼维度数据加⼊时可以映射为颜⾊或⼤⼩,当映射到⼤⼩时则为⽓泡图
k K线图,蜡烛图。常⽤于展现股票交易数据。
pie饼图,圆环图。饼图⽀持两种(半径、⾯积)南丁格尔玫瑰图模式。
radar雷达图,填充雷达图。⾼维度数据展现的常⽤图表。
chord和弦图。常⽤于展现关系数据,外层为圆环图,可体现数据占⽐关系,内层为各个扇形间相互连接的弦,可体现关系数据
force⼒导布局图。常⽤于展现复杂关系⽹络聚类布局。
map地图。内置世界地图、中国及中国34个省市⾃治区地图数据、可通过标准GeoJson扩展地图类型。⽀持svg扩展类地图应⽤,如室内地图、运动场、物件构造等。
引⼊Echarts的⽅式
echarts提供多种引⼊⽅式,请根据你的项⽬类型选择合适的⽅式:
1 模块化包引⼊
需要注意的是,包引⼊提供了开发阶段最⼤的灵活性,但并不适合直接上线,减少请求的⽂件数量是前端性能优化中最基本但很重要的规则,务必在上线时⽂件的连
接压缩。
packages:[{
name:'echarts',
location:'../js/echarts',
main:'echarts'
},{
name:'zrender',
location:'../js/zrender',//zrender与echarts,在同⼀级⽬录,模块化包引⼊
main:'zrender'
}
]
});
⾸先下载Zrender到本地,和ECharts放在同⼀⽬录下。
在echarts/doc/example/www⽂件中建⽴⼀个HTML⽂件,所使⽤的js⽂件都包含在js⽂件中。包含echarts.js、echarts-map.js、esl.js三个,其实只⽤到两个,echarts-map.js并不⽤。
2 模块化单⽂件引⼊(推荐)
如果你使⽤模块化开发但并没有⾃⼰的打包合并环境,或者说你不希望在你的项⽬⾥引⼊第三⽅库的源⽂件,我们建议你使⽤单⽂件引⼊,同模块化包引⼊⼀样,你需要熟悉模块化开发,这种⽅式只是我们预先帮你把常⽤图表组合连接合并在⼀起,你只需⼀个符合AMD规范的加载器,同时引⼊⼀个echarts相关js即可。如你所发现的,build⽂件夹下已经⽣成了不同组合的多个单⽂件见下,根据你的需求场景只需要使⽤其中⼀个即可:
例⼦:在这⾥我们只是⽤line图表,其他的不⽤,如果你不⽤的话打包在⼀起就⾮常浪费,这时候就可以通过build⽬录下的build.js⽂件来构建⼀个更加贴⾝的echarts单⽂件。总结来说模块化如何引⼊ECharts,你都需要如下4步: 1、引⼊⼀个模块加载器,如esl.js或者require.js 2、为ECharts准备⼀个具备⼤⼩(宽⾼)的Dom(当然可以是动态⽣成的) 3、为模块加载器配置echarts的路径,从当前页⾯链接到echarts.js,见上述说明 4、动态加载echarts然后在回调函数中开始使⽤(容我罗嗦⼀句,当你确保同⼀页⾯已经加载过echarts,再使⽤时直接require('echarts').init(dom)就⾏)
⾸先下载下载完成后,安装好node。打开build⽂件夹,看到如下⽂件:
这⾥我已经建⽴了⼀个新的build01.bat 就是单⼀⽣成echarts.js
node build.js optimize=true plain=false exclude=map output=echarts.js
当然也可以在终端⾥通过命令⾏参数⽅式运⾏ node.js构建脚本。
具体语法:
node build.js optimize=true exclude=map,force,line output=echarts.js plain=true
名称描述
optimize是否压缩, 默认false
exclude不打包的图表,多个图表使⽤逗号分割, 默认使⽤所有图表
output输出打包地址,默认为echarts.js
plain是否打包esl, 打包的话可以直接使⽤scripts标签引⼊, 默认false
config-tpl.js⽂件修改为:
{
// appDir: './',
baseUrl: '../src',
name: 'echarts',
packages: [
{
name: 'zrender',
location: '../../zrender/src',
main: 'zrender'
},
{
name: 'echarts',
location: '.',
main: 'echarts'
}
],
include:[
'echarts/chart/line'
],
out: 'echarts.js'
}
完成后,将echarts.js拷贝到doc/example/www/js⽂件中,并将原有的覆盖
HTML配置如下:
paths: {
echarts: '../js/echarts', //echarts.js的路径
          'echarts/chart/bar' : './js/echarts',      // 把所需图表指向单⽂件
          'echarts/chart/line': './js/echarts'
}
});
require(
[
'echarts',
'echarts/chart/line',  // 按需加载所需图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(domMain);
var option = {
setoption
...
}
myChart.setOption(option);
}
);
3 标签式单⽂件引⼊
如果你的项⽬本⾝并不是基于模块化开发的,或者是基于CMD规范(如使⽤的是seajs),那么引⼊基于AMD模块化的echarts可能并不⽅便,我们建议你采⽤srcipt标签
式引⼊,忘掉require,srcipt标签引⼊echarts后将可以直接使⽤两个全局的命名空间:echarts,zrender,但是需要注意的是excanvas依赖body标签插⼊Canvas节点
去判断Canvas的⽀持,如果你把引⽤echarts的script标签放置head内在IE8-的浏览器中会出现报错,解
决的办法就是把标签移动到body内(后)。
标签式引⼊环境中,常⽤模块的引⽤可通过命名空间直取,同模块化下的路径结构,如:
可以直接引⼊的单⽂件如下:
echarts.js : 经过压缩,包含除地图外的全部图表
echarts-original.js : 未压缩,可⽤于调试,包含除地图外的全部图表
echarts-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
echarts-original-map.js : 未压缩,可⽤于调试,全图表,包含world,china以及34个省市级地图数据
<script src="example/www2/js/echarts-plain.js"></script>
<script>
var myChart = echarts.init(domMain);
var option = {
...
}
myChart.setOption(option);
</script>
⽜⼑⼩试----代码解析柱状图
今天在学习Echarts练习时,总是在路径的配置上出现错误,作为⼊门,总结⼀下,在此分享给⼤家,希望有⽤。
需要注意的是ECharts内部也是依赖于另⼀个插件的叫ZRender,当然对于⼤部分图表⽽⾔不需要ZRender的,但是对于地图控件及其他复杂的呈现控件⽽已都是需要ZRender的。为了避免不要的问题出现,建议⼤家在下载ECharts时同时也要下载ZRender。
1、项⽬结构
js⽂件夹:下载了ECharts之后,解压缩,如解压后的根⽬录是echarts-2.2.0,则到echarts-2.2.0\doc\example\www路径下,把⾥⾯的js⽂件夹直接复制粘贴到项⽬的 WebRoot根⽬录下即可。ZRender 插件放在与ECharts的同⼀⽬录下,即zrender-master\src
这⾥有以下⼏点需要说明:
l  所有的跟ECharts有关的⽂件全部都在echarts⽂件夹下
l  echarts⽂件夹的内容分为两部分
1)      ⼀部分是以echarts开头的js⽂件,这些⽂件全部来⾃于1.中的ECharts⽂件⽬录中的js⽂件夹下的⽂件,也就是1.中的图中红框标注的js下的⽂件。如下:
2)      另⼀部分是⼀个名为zrender的⽂件夹,这⾥需要特别注意的是该⽂件夹的命名必须为zrender,因为在echarts的js⽂件中对zrender的引⽤都是以zrender为根⽬录的,zrender⽂件夹的内容即为1.中zrender⽂件⽬录中的src⽂件夹下的内容,如下:
dem1:index.html:在WebRoot根⽬录下新建index.html
<!DOCTYPE html>
<html>
<head>
<title>ECharts</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩(宽⾼)的Dom -->
<div id="main" ></div>
<!-- ECharts单⽂件引⼊ -->
<script src="js/echarts.js"></script>
<script type="text/javascript">
// 路径配置
paths: {
echarts: './js'
}
});
// 使⽤
require(
[
'echarts',
'echarts/chart/bar', // 使⽤柱状图就加载bar模块,按需加载
'echarts/chart/line'
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.ElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","⽺⽑衫","雪纺衫","裤⼦","⾼跟鞋","袜⼦"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:"销量",
type:"bar",
data:[5, 20, 40, 10, 10, 20]
},//折线图
{
name:"销量",
type:"line",
data:[5, 20, 40, 10, 10, 20],
//绘制平均线
markLine : {
data : [
{
type : 'average',
name: '平均值'
}
]
},
//绘制最⾼最低点
markPoint : {
data : [
{
type : 'max',
name: '最⼤值'
},
{
type : 'min',
name: '最⼩值'
}
]
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>
dem2:echarts.jsp:同上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts-基本线性图及其配置要求</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备⼀个具备⼤⼩(宽⾼)的Dom-->
<div id="main" ></div>
<div id="mainMap" ></div>    <!--Step:2 Import echarts.js-->
<!--Step:2 引⼊echarts.js-->
<script src="js/echarts.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径,从当前页⾯链接到echarts.js,定义所需图表路径
paths: {
echarts: './js'  //echarts.js所在的路径
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使⽤,注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {//渲染ECharts图表,可单独写出来作为回调函数
//--- 折柱 ---
//图表渲染的容器对象
var chartContainer = ElementById("main");  //""、''这⾥均可以
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降⽔量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
name : '⽉份',
type : 'category',
data : ['1⽉','2⽉','3⽉','4⽉','5⽉','6⽉','7⽉','8⽉','9⽉','10⽉','11⽉','12⽉']
}
],
yAxis : [
{
name : '数值',
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
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:'bar',
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]
}
]
});
// --- 地图 ---
var myChart2 = ec.ElementById('mainMap'));
var option = {
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'⼴东',selected:true}
]
}
]
};
myChart2.setOption(option); // 为echarts对象加载数据
}
);
</script>
</body>
</html>
完成以上的步骤后,把项⽬发布到服务器,在浏览器上访问echarts.jsp(由于本实例还没有跟后台进⾏交互,只是先做⼀个前台⽤法介绍,所以可以把echart.jsp直接修改成echarts.html⽂件,把它跟js⽂件夹放在同⼀级⽬录下,然后直接⽤浏览器打开echarts.html),即可看到效果。好了,这次总结就先到这⾥!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。