引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html> <html> <header> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </header> </html>
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style=" 600px;height:400px;"></div> </body> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style=" 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
这样你的第一个图表就诞生了!
vue使用 ECharts
<template> <div :style="{height: echartsheight}"> <div style="100%;height:100%;" id="lineEcharts"></div> <div style="position:absolute;top:93%;left:10%;"> <Icon type="ios-umbrella" />最大载荷48 最小载荷32 在0.5m的时候载荷达到最低<br> <Icon type="md-trophy" />在位移2.35m的时候载荷达到最高</div> </div> </template> <script> import echarts from 'echarts'; export default { name: 'lineEcharts', props: { seriesData: { type: Array, default () { return [] } }, echartsheight: { type: String, default: '' } }, data() { return { echartsheight: window.innerHeight, } }, mounted() { this.$nextTick(() => { const option = { title: { left: 'center', text: 'w21-cm35-1 井', subtext: '位置载荷变化曲线功图', }, xAxis: { name: '位移(m)', //轴名 nameLocation: 'middle', //轴位置 nameGap: '20', //name名字与轴线间距 boundaryGap: true, }, yAxis: { type: 'value', name: '载荷', //轴名 // max: 100, //轴刻度最大值 min: 30, //轴刻度最小值 nameGap: 30, //name名字与轴线间距 nameLocation: 'center', //轴位置 }, series: [{ data: this.seriesData, //二维数组 type: 'line', //图的类型,柱状图'bar' ,折线图'line' symbol: 'none', //这句就是去掉点的 smooth: true, //这句就是让曲线变平滑的 }] } const lineEcharts = echarts.init(document.getElementById('lineEcharts')); lineEcharts.setOption(option); window.addEventListener('resize', function () { lineEcharts.resize(); }); }); } }; </script>
npm 安装 ECharts
在 3.1.1
版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1
开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
引入 ECharts
通过 npm 上安装的 ECharts 和 zrender 会放在node_modules
目录下。可以直接在项目代码中 require('echarts')
得到 ECharts。
var echarts = require('echarts');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
按需引入 ECharts 图表和组件
默认使用 require('echarts')
得到的是已经加载了所有图表和组件的 ECharts 包,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。
例如上面示例代码中只用到了柱状图,提示框和标题组件,因此在引入的时候也只需要引入这些模块,可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。
异步加载
入门示例中的数据是在初始化后setOption
中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts
中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption
填入数据和配置项就行。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
ECharts 中在更新数据的时候需要通过name
属性对应到相应的系列,上面示例中如果name
不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的name
数据。
loading 动画
如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
ECharts 工作在用户指定高宽的 DOM 节点(容器)中。ECharts 的『组件』和『系列』都在这个 DOM 节点中,每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局,因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时,这种方式并不能自动避免组件重叠的情况,尤其在移动端小屏的情况下。
另外,有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。
为了解决这个问题,ECharts 完善了组件的定位设置,并且实现了类似 CSS Media Query 的自适应能力。
ECharts组件的定位和布局
大部分『组件』和『系列』会遵循两种定位方式:
left/right/top/bottom/width/height 定位方式:
这六个量中,每个量都可以是『绝对值』或者『百分比』或者『位置描述』。
-
绝对值
单位是浏览器像素(px),用
number
形式书写(不写单位)。例如{left: 23, height: 400}
。 -
百分比
表示占 DOM 容器高宽的百分之多少,用
string
形式书写。例如{right: '30%', bottom: '40%'}
。 -
位置描述
- 可以设置
left: 'center'
,表示水平居中。 - 可以设置
top: 'middle'
,表示垂直居中。
- 可以设置
这六个量的概念,和 CSS 中六个量的概念类似:
- left:距离 DOM 容器左边界的距离。
- right:距离 DOM 容器右边界的距离。
- top:距离 DOM 容器上边界的距离。
- bottom:距离 DOM 容器下边界的距离。
- width:宽度。
- height:高度。
在横向,left
、right
、width
三个量中,只需两个量有值即可,因为任两个量可以决定组件的位置和大小,例如 left
和right
或者 right
和 width
都可以决定组件的位置和大小。 纵向,top
、bottom
、height
三个量,和横向类同不赘述。
center
/ radius
定位方式:
-
center
是一个数组,表示
[x, y]
,其中,x
、y
可以是『绝对值』或者『百分比』,含义和前述相同。 -
radius
是一个数组,表示
[内半径, 外半径]
,其中,内外半径可以是『绝对值』或者『百分比』,含义和前述相同。在自适应容器大小时,百分比设置是很有用的。
横向(horizontal)和纵向(vertical)
ECharts的『外观狭长』型的组件(如 legend
、visualMap
、dataZoom
、timeline
等),大多提供了『横向布局』『纵向布局』的选择。例如,在细长的移动端屏幕上,可能适合使用『纵向布局』;在PC宽屏上,可能适合使用『横向布局』。
横纵向布局的设置,一般在『组件』或者『系列』的 orient
或者 layout
配置项上,设置为 'horizontal'
或者'vertical'
。
于 ECharts2 的兼容:
ECharts2 中的 x/x2/y/y2
的命名方式仍被兼容,对应于 left/right/top/bottom
。但是建议写 left/right/top/bottom
。
位置描述中,为兼容 ECharts2,可以支持一些看起来略奇怪的设置:left: 'right'
、left: 'left'
、top: 'bottom'
、top: 'top'
。这些语句分别等效于:right: 0
、left: 0
、bottom: 0
、top: 0
,写成后者就不奇怪了。
Media Query
Media Query 提供了『随着容器尺寸改变而改变』的能力。
如下例子,可尝试拖动右下角的圆点,随着尺寸变化,legend 和 系列会自动改变布局位置和方式。
要在 option 中设置 Media Query 须遵循如下格式:
option = {
baseOption: { // 这里是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // 这里定义了 media query 的逐条规则。
{
query: {...}, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二个规则。
option: { // 第二个规则对应的option。
legend: {...},
...
}
},
{ // 这条里没有写规则,表示『默认』,
option: { // 即所有规则都不满足时,采纳这个option。
legend: {...},
...
}
}
]
};
上面的例子中,baseOption
、以及 media
每个 option 都是『原子 option』,即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option,我们称为『复合 option』。baseOption
是必然被使用的,此外,满足了某个 query
条件时,对应的 option 会被使用 chart.mergeOption()
来 merge 进去。
query:
每个 query
类似于这样:
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}
现在支持三个属性:width
、height
、aspectRatio
(长宽比)。每个属性都可以加上 min
或 max
前缀。比如,minWidth: 200
表示『大于等于200px宽度』。两个属性一起写表示『并且』,比如:{minWidth: 200, maxHeight: 300}
表示『大于等于200px宽度,并且小于等于300px高度』。
option:
media
中的 option 既然是『原子 option』,理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的,例如截取上面例子中的一部分 query option:
media: [
...,
{
query: {
maxAspectRatio: 1 // 当长宽比小于1时。
},
option: {
legend: { // legend 放在底部中间。
right: 'center',
bottom: 0,
orient: 'horizontal' // legend 横向布局。
},
series: [ // 两个饼图左右布局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500 // 当容器宽度小于 500 时。
},
option: {
legend: {
right: 10, // legend 放置在右侧中间。
top: '15%',
orient: 'vertical' // 纵向布局。
},
series: [ // 两个饼图上下布局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'