echarts学习笔记

最新推荐文章于 2024-03-25 10:15:00 发布

weixin_42163203

最新推荐文章于 2024-03-25 10:15:00 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/weixin_42163203/article/details/80239196

版权

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。这里给大家讲解两个案例带大家入门ECharts。
ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，
ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

Echarts 首页：http://echarts.baidu.com/index.html
　　特性：http://echarts.baidu.com/doc/feature.html
1、AMD规范的加载器——esl.js，这是什么？
　　答：关于AMD规范可以参考阮一峰的这篇文章Javascript模块化编程（二）：AMD规范简单来说，AMD规范就是异步方式加载模块的一种方式，避免因为模块加载过慢而导致浏览器“假死”。
　　
二、两种引入文件的方式
echarts插件下载地址：
http://echarts.baidu.com/build/echarts-2.2.0.zip
https://codeload.github.com/ecomfe/echarts/zip/2.2.0

模块化单文件引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93 <!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<script src="js/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'js/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
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}
]
}
]
};
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var selected = param.selected;
var str = '当前选择： ';
for (var p in selected) {
if (selected[p]) {
str += p + ' ';
}
}
document.getElementById('wrong-message').innerHTML = str;
})

/*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]
}
]
};*/

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
方法二的效果图就是全国地图的效果，点击当前省份，背景颜色切换为黄色，如下：

我的文件目录是这样的：

so，在配置时，记得配置好路径！！！！
关于这两种引入方式，
1、肯定的，如果是用标签式的引入，就跟我们使用jquery的时候一样，在使用之前先引入jquery类库。然后就开始用了。
2、标签式引入，是引入了整个echarts这个插件，总共大小是899KB,压缩后的jquery大小才有90.9KB，~~~~(>_<)~~~~ 。这个插件实在大！！
3、模块化单文件引入，这是引入方式是一个基础js+你想要的那个模块，比如echarts.js+map.js，一个基础js的大小是341KB，一个模块是最小是k.js，5.15KB，最大模块是map.js，437KB，如果项目里要绘制的图不是很多种，使用模块化更节约资源。
三、笔记
标签式引入文件的步骤：
1、初始化echarts对象
var myChart = echarts.init(document.getElementById('main'));
2、做好配置option
option={

}
3、加载数据到echarts对象
myChart.setOption(option)
===========================================================
关于几个常用到的参数：
title：
标题，在左上方
ps：跟subtext都可以通过x：参数进行更改
subtext：
副标题，在标题下方
legen:
图例，在头部的中间
boundaryGap:true
类目起始和结束两端空白策略
type:line：
图的类型,折线图
series:[{type:line}]
tooltip：
鼠标悬浮时的提示框
tooltip:{trigger:'axis'}
toolbox:
工具箱，在右上方，可不要
calculable : true：
拖拽重计算，就是这个柱形可以用鼠标拖动。
xAxis:
设置横坐标
yAxis：
设置纵坐标
series：
最重要，生成图表内容的。
markPoint：
绘制点，包括最大小值，以及转折点
markLine：
绘制直线，平均值线
splitLine : false
分割线
grid:设置网格
grid : {
borderWidth : 0, /* 两边的border=0 */
x :'55px', /* 通过修改xy x2 y2更改折线图的大小 */
y : '25px',
x2 : '20px',
y2 : '20px',
},
trigger:item/axis /* 触发提示框显示的样式 */
tooltip : {
trigger: 'item'
},
itemStyle: /* 要设置拐点的图案跟颜色也是在这里设置，line跟圈圈的颜色就直接设置color */
itemStyle: {
normal: {
color : '#03a1e8',
lineStyle: {
borderColor : '#03a1e8'
},
label : { // 显示此刻数据
show: true,
textStyle : {
color : '#555',
fontSize : '12'
}
},
},
}
================================================
Last，API文档里面有好多参数，我个人比较喜欢阅读里面说明参数的图解，看起来更加简单明了，印象深刻。例如这图：
一看就知道要如何去掉标尺设置axisTick参数，要去除横竖的线是设置对应的x、y轴上得splitLine参数。

可设置参数甚多，阅读API文档是最好的idea~
2、我们先来看一下echart的大概的包：　
• echarts.js : 经过压缩，包含除地图外的全部图表
• echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
• echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
• echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
　　看得出，这种分类非常有意义。

　　3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。
　　关于Echarts的那个入门图表，我想很多新手跟我一样的迷惑，require和require.config这个两个公共方法到底什么来的？
　　答：AMD规范的加载器——esl.js的公共方法。（如有错误，请指正。）
　　
　　4、require.config的作用是什么？
　　答：为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径。一切尽在echarts-2.0.4文件夹下的src文件夹中。

　　5、解释一下require方法？
　　答：require方法有2个参数。
　　第一个参数为一个数组，数组元素是需要加载的echarts模块，需要哪个就加载哪个。（经本人测试，这个数组传入一个空数组都是可以的 !- -）莫非，传入不正确，会加载全部文件到内存，传入正确就加载部分模块到内存？求大神解答！
　　第二个参数为一个带一个参数的方法：function (ec){}, 这个ec对象就是echarts对象了。

　　OK，基本解释完了。可能初学者看了Eharts入门实例还是不太理解那Echarts3种导入方式的用法。（入门示例只有2种——标签式单文件引入和模块化单文件引入）
　　因为入门实例里，js文件指向的是百度服务器上的资源，而我们一般开发，js资源都是放在本地的。
　　
　　6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：
　　（1）、标签式单文件引入.html：　　

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<script src="js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('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]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>

　　需要注意的是，可以直接引入的单文件只有：
• echarts-plain.js : 经过压缩，包含除地图外的全部图表
• echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表
• echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
• echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
　　而除了这些带“plain”字眼的库，其他库都是含echarts这个变量的。导入其他库，会出现问题：echarts未定义。

　　（2）、模块化包引入.html，这个就需要用到2个src文件。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>

<script src="js/esl.js"></script>
</head>
<body>

<div id="main" style="height:400px"></div>
<script type="text/javascript">
// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
require.config({
packages: [
{
name: 'echarts',
location: 'js/src',
main: 'echarts'
},
{
name: 'zrender',
location: 'js/zrender/src',
main: 'zrender'
}
]
});

// 使用
require(
[
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('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]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

　　（3）、模块化单文件引入.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>

<script src="js/esl.js"></script>
</head>
<body>

<div id="main" style="height:400px"></div>
<script type="text/javascript">
// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
require.config({
paths:{
'echarts' : './js/echarts',
'echarts/chart/bar' : './js/echarts'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('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]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

　　2、如果上面的还有不明白的，参考一下我的本地目录：
　　
　　js中有如下的文件：
　　
　　其中，src是echarts-2.0.4文件夹下的src文件夹，zrender里面也有一个src文件夹，是zrender-2.0.4文件夹下面的src文件夹。
　　最后吐槽一句：Echarts的这个文档做的真是太粗略了，实在是朦朦胧胧，含糊不清。跟Highcharts之类的比起来差远了。想要详细了解各种特性，多看实例吧。。。

weixin_42163203

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts学习笔记

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。这里给大家讲解两个案例带大家入门ECharts。ECharts，缩写来自Enterprise Ch...
复制链接

扫一扫