ECharts图表入门：如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表

来源：互联网发布：mac日本官网编辑：程序博客网时间：2024/05/22 07:47

感谢有奉献精神的人

转自：http://www.stepday.com/topic/?804

细看ECharts图表组件的结构，和Highcharts图表组件的一些结构相当类似，最不同的一点就是在引入图表相关的一些文件时有所差别，Highcharts图表组件需要jquery.js的支持且引入核心的highcharts.js文件即可。然后ECharts图表组件的相关文件引入去有很多种方式，比如我们前面写到的一篇关于如何引入ECharts图表的文章：ECharts图表组件初级入门之：如何将ECharts引入至项目中的几种方式一种有三种，引入的有点类似jsp引入包一样。

现在就来聊聊我是如何一步步实现ECharts图表最最基本的线性图的！

ECharts图表初级入门篇：如何配置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?
// 按需加载
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './js/echarts' //echarts.js的路径
}
});
 
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/line'
],
//回调函数
DrawEChart
);

2、编写回调函数，这个回调函数实在引入相关文件完成的情况下执行的，这个回调函数主要是用于完成对指定容器初始化图表其动态设置图表数据，具体代码请见：

view sourceprint?
//渲染ECharts图表
function DrawEChart(ec) {
//图表渲染的容器对象
var chartContainer = document.getElementById("main");
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
//图表标题
title: {
text: "ECharts简单线形图表及其配置展示实例", //正标题
link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开
x: "center", //标题水平方向位置
subtext: "From:http://www.stepday.com", //副标题
sublink: "http://www.stepday.com", //副标题链接
//正标题样式
textStyle: {
fontSize:24
},
//副标题样式
subtextStyle: {
fontSize:12,
color:"red"
}
},
//数据提示框配置
tooltip: {
trigger: 'axis' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框
},
//图例配置
legend: {
data: ['蒸发量', '降水量'], //这里需要与series内的每一组数据的name值保持一致
y:"bottom"
},
//工具箱配置
toolbox: {
show: true, //是否显示工具箱
feature: {
mark: false, // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部
dataView: { readOnly: false }, // 数据视图，上图icon左数8，打开数据视图
magicType: ['line', 'bar'],      // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
restore: true, // 还原，复位原始图表，上图icon左数9，还原
saveAsImage: true  // 保存为图片，上图icon左数10，保存
}
},
calculable: true,
//轴配置
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
name: "月份"
}
],
//Y轴配置
yAxis: [
{
type: 'value',
splitArea: { show: true },
name:"数值"
}
],
//图表Series数据序列配置
series: [
{
name: '蒸发量',
type: 'line',
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: 'line',
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]
}
]
});
}

通过以上一些步骤我们就已经完成另一个基本ECharts图表的配置以及展现工作，我们浏览demo.html页面就可以看到一个非常漂亮的ECharts的线形图了。

最后呈上我自己编写的完整实例代码，代码内所提及到的相关js文件请下载并放到相应的文件路径下，否则图表会出不来。

view sourceprint?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ECharts-基本线性图及其配置要求</title>
<script src="js/esl.js" type="text/javascript"></script>
</head>
<body>
<div id="main" style="height: 400px; width:800px; border: 1px solid #ccc; padding: 10px;">
</div>
<script type="text/javascript" language="javascript">
// 按需加载
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './js/echarts' //echarts.js的路径
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/line'
],
//回调函数
DrawEChart
);
 
//渲染ECharts图表
function DrawEChart(ec) {
//图表渲染的容器对象
var chartContainer = document.getElementById("main");
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
//图表标题
title: {
text: "ECharts简单线形图表及其配置展示实例", //正标题
link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开
x: "center", //标题水平方向位置
subtext: "From:http://www.stepday.com", //副标题
sublink: "http://www.stepday.com", //副标题链接
//正标题样式
textStyle: {
fontSize:24
},
//副标题样式
subtextStyle: {
fontSize:12,
color:"red"
}
},
//数据提示框配置
tooltip: {
trigger: 'axis' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框
},
//图例配置
legend: {
data: ['蒸发量', '降水量'], //这里需要与series内的每一组数据的name值保持一致
y:"bottom"
},
//工具箱配置
toolbox: {
show: true, //是否显示工具箱
feature: {
mark: false, // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部
dataView: { readOnly: false }, // 数据视图，上图icon左数8，打开数据视图
magicType: ['line', 'bar'],      // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
restore: true, // 还原，复位原始图表，上图icon左数9，还原
saveAsImage: true  // 保存为图片，上图icon左数10，保存
}
},
calculable: true,
//轴配置
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
name: "月份"
}
],
//Y轴配置
yAxis: [
{
type: 'value',
splitArea: { show: true },
name:"数值"
}
],
//图表Series数据序列配置
series: [
{
name: '蒸发量',
type: 'line',
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: 'line',
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]
}
]
});
}
</script>
</body>
</html>

如果有什么疑问，请随时留言，让我们一起学习和深入了解EChart的美妙和神奇之处！

2 0