ECharts图表初级入门篇:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
2014-12-16 10:14
936 查看
细看ECharts图表组件的结构,和Highcharts图表组件的一些结构相当类似,最不同的一点就是在引入图表相关的一些文件时有所差别,Highcharts图表组件需要jquery.js的支持且引入核心的highcharts.js文件即可。然后ECharts图表组件的相关文件引入去有很多种方式,比如我们前面写到的一篇关于如何引入ECharts图表的文章:ECharts图表组件初级入门之:如何将ECharts引入至项目中的几种方式 一种有三种,引入的有点类似jsp引入包一样。
现在就来聊聊我是如何一步步实现ECharts图表最最基本的线性图的!
一、引入ECharts图表相关的js文件
1、新建一个文件夹MyChart;然后下面创建一个js文件夹和一个demo.html文件。
2、去官方ECharts下载完整示例包,然后找到通过echarts-master\doc\example\www\js找到旗下两个相关js文件:
1)、esl.js 这个包主要是包含和封装了关于ECharts图表的一些初始化方法等;
2)、echarts.js 经过压缩,包含除地图外的全部图表;
二、编写图表页面完成基本结构设置
1、打开demo.html页面;
2、在Head内通过script引入esl.js文件;
view
sourceprint?
3、在body内创建一个图标容器div,且设定容器的大小(width和height),不设置大小是不行的
view
sourceprint?
我们设置了一个宽800高400的图表容器,且给容器设置了边框和距离外围容器的边缘值10px;
三、ECharts图表的基本配置完成图表的渲染和呈现
1、通过在页尾编写javascript代码加载线性图表所需要用到的文件以及一些基本按需加载结构定义图表路径;
view
sourceprint?
2、编写回调函数,这个回调函数实在引入相关文件完成的情况下执行的,这个回调函数主要是用于完成对指定容器初始化图表其动态设置图表数据,具体代码请见:
view
sourceprint?
通过以上一些步骤我们就已经完成另一个基本ECharts图表的配置以及展现工作,我们浏览demo.html页面就可以看到一个非常漂亮的ECharts的线形图了。
最后呈上我自己编写的完整实例代码,代码内所提及到的相关js文件请下载并放到相应的文件路径下,否则图表会出不来。
view
sourceprint?
现在就来聊聊我是如何一步步实现ECharts图表最最基本的线性图的!
一、引入ECharts图表相关的js文件
1、新建一个文件夹MyChart;然后下面创建一个js文件夹和一个demo.html文件。
2、去官方ECharts下载完整示例包,然后找到通过echarts-master\doc\example\www\js找到旗下两个相关js文件:
1)、esl.js 这个包主要是包含和封装了关于ECharts图表的一些初始化方法等;
2)、echarts.js 经过压缩,包含除地图外的全部图表;
二、编写图表页面完成基本结构设置
1、打开demo.html页面;
2、在Head内通过script引入esl.js文件;
view
sourceprint?
1.
<
script
src
=
"js/esl.js"
type
=
"text/javascript"
></
script
>
3、在body内创建一个图标容器div,且设定容器的大小(width和height),不设置大小是不行的
view
sourceprint?
1.
<
div
id
=
"main"
style
=
"height: 400px; width:800px; border: 1px solid #ccc; padding: 10px;"
>
2.
</
div
>
我们设置了一个宽800高400的图表容器,且给容器设置了边框和距离外围容器的边缘值10px;
三、ECharts图表的基本配置完成图表的渲染和呈现
1、通过在页尾编写javascript代码加载线性图表所需要用到的文件以及一些基本按需加载结构定义图表路径;
view
sourceprint?
01.
// 按需加载
02.
// Step:3 conifg ECharts's path,link to echarts.js from current page.
03.
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
04.
require.config({
05.
paths: {
06.
echarts:
'./js/echarts'
//echarts.js的路径
07.
}
08.
});
09.
10.
// Step:4 require echarts and use it in the callback.
11.
// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
12.
require(
13.
[
14.
'echarts'
,
15.
'echarts/chart/line'
16.
],
17.
//回调函数
18.
DrawEChart
19.
);
2、编写回调函数,这个回调函数实在引入相关文件完成的情况下执行的,这个回调函数主要是用于完成对指定容器初始化图表其动态设置图表数据,具体代码请见:
view
sourceprint?
01.
//渲染ECharts图表
02.
function
DrawEChart(ec) {
03.
//图表渲染的容器对象
04.
var
chartContainer = document.getElementById(
"main"
);
05.
//加载图表
06.
var
myChart = ec.init(chartContainer);
07.
myChart.setOption({
08.
//图表标题
09.
title: {
10.
text:
"ECharts简单线形图表及其配置展示实例"
,
//正标题
11.
link:
"http://www.stepday.com"
, //正标题链接 点击可在新窗口中打开
12.
x:
"center"
,
//标题水平方向位置
13.
subtext:
"From:http://www.stepday.com"
, //副标题
14.
sublink:
"http://www.stepday.com"
, //副标题链接
15.
//正标题样式
16.
textStyle: {
17.
fontSize:24
18.
},
19.
//副标题样式
20.
subtextStyle: {
21.
fontSize:12,
22.
color:
"red"
23.
}
24.
},
25.
//数据提示框配置
26.
tooltip: {
27.
trigger:
'axis'
//触发类型,默认数据触发,见下图,可选为:'item' | 'axis' 其实就是是否共享提示框
28.
},
29.
//图例配置
30.
legend: {
31.
data: [
'蒸发量'
,
'降水量'
],
//这里需要与series内的每一组数据的name值保持一致
32.
y:
"bottom"
33.
},
34.
//工具箱配置
35.
toolbox: {
36.
show:
true
,
//是否显示工具箱
37.
feature: {
38.
mark:
false
,
// 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部
39.
dataView: { readOnly:
false
},
// 数据视图,上图icon左数8,打开数据视图
40.
magicType: [
'line'
,
'bar'
],
// 图表类型切换,当前仅支持直角系下的折线图、柱状图转换,上图icon左数6/7,分别是切换折线图,切换柱形图
41.
restore:
true
,
// 还原,复位原始图表,上图icon左数9,还原
42.
saveAsImage:
true
// 保存为图片,上图icon左数10,保存
43.
}
44.
},
45.
calculable:
true
,
46.
//轴配置
47.
xAxis: [
48.
{
49.
type:
'category'
,
50.
data: [
'1月'
,
'2月'
,
'3月'
,
'4月'
,
'5月'
,
'6月'
,
'7月'
,
'8月'
,
'9月'
,
'10月'
,
'11月'
,
'12月'
],
51.
name:
"月份"
52.
}
53.
],
54.
//Y轴配置
55.
yAxis: [
56.
{
57.
type:
'value'
,
58.
splitArea:
{ show:
true
},
59.
name:
"数值"
60.
}
61.
],
62.
//图表Series数据序列配置
63.
series: [
64.
{
65.
name:
'蒸发量'
,
66.
type:
'line'
,
67.
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]
68.
},
69.
{
70.
name:
'降水量'
,
71.
type:
'line'
,
72.
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]
73.
}
74.
]
75.
});
76.
}
通过以上一些步骤我们就已经完成另一个基本ECharts图表的配置以及展现工作,我们浏览demo.html页面就可以看到一个非常漂亮的ECharts的线形图了。
最后呈上我自己编写的完整实例代码,代码内所提及到的相关js文件请下载并放到相应的文件路径下,否则图表会出不来。
view
sourceprint?
001.
<!DOCTYPE html>
002.
<
html
lang
=
"en"
>
003.
<
head
>
004.
<
meta
charset
=
"utf-8"
/>
005.
<
title
>ECharts-基本线性图及其配置要求</
title
>
006.
<
script
src
=
"js/esl.js"
type
=
"text/javascript"
></
script
>
007.
</
head
>
008.
<
body
>
009.
<
div
id
=
"main"
style
=
"height: 400px; width:800px; border: 1px solid #ccc; padding: 10px;"
>
010.
</
div
>
011.
<
script
type
=
"text/javascript"
language
=
"javascript"
>
012.
// 按需加载
013.
// Step:3 conifg ECharts's path,link to echarts.js from current page.
014.
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
015.
require.config({
016.
paths: {
017.
echarts: './js/echarts' //echarts.js的路径
018.
}
019.
});
020.
// Step:4 require echarts and use it in the callback.
021.
// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
022.
require(
023.
[
024.
'echarts',
025.
'echarts/chart/line'
026.
],
027.
//回调函数
028.
DrawEChart
029.
);
030.
031.
//渲染ECharts图表
032.
function DrawEChart(ec) {
033.
//图表渲染的容器对象
034.
var chartContainer = document.getElementById("main");
035.
//加载图表
036.
var myChart = ec.init(chartContainer);
037.
myChart.setOption({
038.
//图表标题
039.
title: {
040.
text:
"ECharts简单线形图表及其配置展示实例",//正标题
041.
link:
"http://www.stepday.com",//正标题链接 点击可在新窗口中打开
042.
x:
"center",//标题水平方向位置
043.
subtext:
"From:http://www.stepday.com",//副标题
044.
sublink:
"http://www.stepday.com",//副标题链接
045.
//正标题样式
046.
textStyle: {
047.
fontSize:24
048.
},
049.
//副标题样式
050.
subtextStyle: {
051.
fontSize:12,
052.
color:"red"
053.
}
054.
},
055.
//数据提示框配置
056.
tooltip: {
057.
trigger: 'axis' //触发类型,默认数据触发,见下图,可选为:'item' | 'axis' 其实就是是否共享提示框
058.
},
059.
//图例配置
060.
legend: {
061.
data: ['蒸发量','降水量'],//这里需要与series内的每一组数据的name值保持一致
062.
y:"bottom"
063.
},
064.
//工具箱配置
065.
toolbox: {
066.
show:
true,//是否显示工具箱
067.
feature: {
068.
mark:
false,// 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部
069.
dataView: { readOnly:false },// 数据视图,上图icon左数8,打开数据视图
070.
magicType: ['line','bar'],// 图表类型切换,当前仅支持直角系下的折线图、柱状图转换,上图icon左数6/7,分别是切换折线图,切换柱形图
071.
restore:
true,// 还原,复位原始图表,上图icon左数9,还原
072.
saveAsImage: true // 保存为图片,上图icon左数10,保存
073.
}
074.
},
075.
calculable: true,
076.
//轴配置
077.
xAxis: [
078.
{
079.
type: 'category',
080.
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
081.
name: "月份"
082.
}
083.
],
084.
//Y轴配置
085.
yAxis: [
086.
{
087.
type: 'value',
088.
splitArea:
{ show:true },
089.
name:"数值"
090.
}
091.
],
092.
//图表Series数据序列配置
093.
series: [
094.
{
095.
name: '蒸发量',
096.
type: 'line',
097.
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]
098.
},
099.
{
100.
name: '降水量',
101.
type: 'line',
102.
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]
103.
}
104.
]
105.
});
106.
}
107.
</
script
>
108.
</
body
>
109.
</
html
>
相关文章推荐
- ECharts图表入门:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
- ECharts图表组件中级入门(Axis-axisLabel):图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
- echarts图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
- ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
- highcharts图表高级入门之polar:极地图的基本配置以及一些关键配置说明
- highcharts图表高级入门之polar:极地图的基本配置以及一些关键配置说明(转载)
- ECharts图表初级入门(三):ECharts对象的数据实例化方法汇总以及注意事项
- 菜鸟学习linux笔记与练习-----第二天。一些基本命令以及初级网络配置
- VB.NET中如何添加配置文件(初级篇)
- Linux下静态库_库的基本概念;如何生成静态库动态库;nm查看库中包含那些函数、ar生成静态库,查看库中包含那些.o文件、ldd查看程序依赖的.so文件;gcc/g++与库相关的参数-L,-l,-f
- nfs文件服务器以及客户端基本配置
- Struts2 拦截器 及如何获得 servlet 请求对象 以及Struts 基本配置 &&Session 超时设置
- classpath 和 classpath* 区别以及如何覆盖在配置文件中的Bean ID
- linux一些基本命令以及初级网络配置方法
- vi/vim使用入门: vimrc在哪儿?vim配置文件相关问题
- Centos yum 配置文件下载以及相关链接
- debian基本设置以及配置XManager远程登录桌面、命令行设置、Xftp上传下载文件
- linux环境下和网络服务相关的配置文件含义及如何配置
- 如何彻底删除DB2中的Database以及DB2文件配置
- Hibernate学习笔记(4):基本映射以及相关属性配置