echarts 怎样在一个页面显示多张图表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 怎样在一个页面显示多张图表相关的知识，希望对你有一定的参考价值。
最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建多个图表，不知道该如何做。最大的问题可能是受到了require([],function());的阻碍吧。其实require无非就是一个模块化加载借用其回调函数去创建图表对象。
所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。
一个页面内创建多个ECharts图表示例效果图呈现
想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：
1、想要创建几个图表对象就需要预先设置多少个图表容器
图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。
<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
这里准备了两个容器。
2、引入相关的js文件
<script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
3、编写好创建不同图表对象的方法
1）、创建一个柱状图的函数
//创建ECharts柱状图图表
function DrawColumnEChart(ec)
//--- 柱状图 ---
var myChart = ec.init(document.getElementById(\'main\'));
//图表显示提示信息
myChart.showLoading(
text: "图表数据正在努力加载..."
);
myChart.hideLoading();
myChart.setOption(
title:
text: "柱状图"
,
tooltip:
trigger: \'axis\'
,
legend:
data: [\'stepday.com\', \'tuiwosa.com\']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: \'category\',
data: [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\', \'6月\', \'7月\', \'8月\', \'9月\', \'10月\', \'11月\', \'12月\']
],
yAxis: [
type: \'value\',
splitArea: show: true
],
series: [
name: \'stepday.com\',
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: \'tuiwosa.com\',
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 ecConfig = require(\'echarts/config\');
//ECharts图表的click事件监听
myChart.on("click", function ()
alert("你点击我了!");
);
2）、创建折线图的函数
//创建ECharts折线图图表
function DrawLineEChart(ec)
//--- 折线图 ---
var myLineChart = ec.init(document.getElementById(\'mainLine\'));
//图表显示提示信息
myLineChart.showLoading(
text: "图表数据正在努力加载..."
);
myLineChart.hideLoading();
myLineChart.setOption(
title:
text: "折线图"
,
tooltip:
trigger: \'axis\'
,
legend:
data: [\'stepday.com\', \'tuiwosa.com\']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: \'category\',
data: [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\', \'6月\', \'7月\', \'8月\', \'9月\', \'10月\', \'11月\', \'12月\']
],
yAxis: [
type: \'value\',
splitArea: show: true
],
series: [
name: \'stepday.com\',
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: \'tuiwosa.com\',
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]
]
);
var ecConfig = require(\'echarts/config\');
//ECharts图表的click事件监听
myLineChart.on("click", function ()
alert("你点击我了!");
);
4、封装一个统一调用创建不同图表的函数
///将画多个图表的进行函数封装
function DrawCharts(ec)
DrawColumnEChart(ec);
DrawLineEChart(ec);
5、结合模块加载函数require(requireArr,callbackFunction)创建图表对象
require(
[
\'echarts\',
\'echarts/chart/bar\', //按需加载图表关于bar图的部分
\'echarts/chart/line\' //按需加载图表关于线性图的部分
],
DrawCharts
);
6、特别提醒
1）、创建不同图表对象的时候需要注意方法内部关于init()初始化图表方法的时候其id要与需要状态当前图表容器id保持一致。
7、完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>ECharts-基本线性图</title>
<script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div style="clear: both;">
<h3>
STEP DAY</h3>
<p>
我们只提供最直接、最具价值的信息，旨在：<a href="http://www.stepday.com/myblog/?echarts" target="_blank">www.stepday.com</a>
</p>
</div>
<script type="text/javascript" language="javascript">
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
\'echarts\',
\'echarts/chart/bar\', //按需加载图表关于bar图的部分
\'echarts/chart/line\' //按需加载图表关于线性图的部分
],
DrawCharts
);
///将画多个图表的进行函数封装
function DrawCharts(ec)
DrawColumnEChart(ec);
DrawLineEChart(ec);
//创建ECharts柱状图图表
function DrawColumnEChart(ec)
//--- 柱状图 ---
var myChart = ec.init(document.getElementById(\'main\'));
//图表显示提示信息
myChart.showLoading(
text: "图表数据正在努力加载..."
);
myChart.hideLoading();
myChart.setOption(
title:
text: "柱状图"
,
tooltip:
trigger: \'axis\'
,
legend:
data: [\'stepday.com\', \'tuiwosa.com\']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: \'category\',
data: [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\', \'6月\', \'7月\', \'8月\', \'9月\', \'10月\', \'11月\', \'12月\']
],
yAxis: [
type: \'value\',
splitArea: show: true
],
series: [
name: \'stepday.com\',
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: \'tuiwosa.com\',
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 ecConfig = require(\'echarts/config\');
//ECharts图表的click事件监听
myChart.on("click", function ()
alert("你点击我了!");
);
//创建ECharts折线图图表
function DrawLineEChart(ec)
//--- 折线图 ---
var myLineChart = ec.init(document.getElementById(\'mainLine\'));
//图表显示提示信息
myLineChart.showLoading(
text: "图表数据正在努力加载..."
);
myLineChart.hideLoading();
myLineChart.setOption(
title:
text: "折线图"
,
tooltip:
trigger: \'axis\'
,
legend:
data: [\'stepday.com\', \'tuiwosa.com\']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: \'category\',
data: [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\', \'6月\', \'7月\', \'8月\', \'9月\', \'10月\', \'11月\', \'12月\']
],
yAxis: [
type: \'value\',
splitArea: show: true
],
series: [
name: \'stepday.com\',
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: \'tuiwosa.com\',
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]
]
);
var ecConfig = require(\'echarts/config\');
//ECharts图表的click事件监听
myLineChart.on("click", function ()
alert("你点击我了!");
);
</script>
</body>
</html>
转载 参考技术A 最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建多个图表，不知道该如何做。最大的问题可能是受到了require([],function());的阻碍吧。
其实require无非就是一个模块化加载借用其回调函数去创建图表对象。
所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。
一个页面内创建多个ECharts图表示例效果图呈现
想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：
1、想要创建几个图表对象就需要预先设置多少个图表容器
图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。
<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
这里准备了两个容器。
2、引入相关的js文件
<script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
3、编写好创建不同图表对象的方法
1）、创建一个柱状图的函数
//创建ECharts柱状图图表
function DrawColumnEChart(ec)
//--- 柱状图 ---
var myChart = ec.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading(
text: "图表数据正在努力加载..."
);
myChart.hideLoading();
myChart.setOption(
title:
text: "柱状图"
,
tooltip:
trigger: 'axis'
,
legend:
data: ['stepday.com', 'tuiwosa.com']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
],
yAxis: [
type: 'value',
splitArea: show: true
],
series: [
name: 'stepday.com',
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: 'tuiwosa.com',
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 ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myChart.on("click", function ()
alert("你点击我了!");
);
2）、创建折线图的函数
//创建ECharts折线图图表
function DrawLineEChart(ec)
//--- 折线图 ---
var myLineChart = ec.init(document.getElementById('mainLine'));
//图表显示提示信息
myLineChart.showLoading(
text: "图表数据正在努力加载..."
);
myLineChart.hideLoading();
myLineChart.setOption(
title:
text: "折线图"
,
tooltip:
trigger: 'axis'
,
legend:
data: ['stepday.com', 'tuiwosa.com']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
],
yAxis: [
type: 'value',
splitArea: show: true
],
series: [
name: 'stepday.com',
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: 'tuiwosa.com',
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]
]
);
var ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myLineChart.on("click", function ()
alert("你点击我了!");
);
4、封装一个统一调用创建不同图表的函数
///将画多个图表的进行函数封装
function DrawCharts(ec)
DrawColumnEChart(ec);
DrawLineEChart(ec);
5、结合模块加载函数require(requireArr,callbackFunction)创建图表对象
require(
[
'echarts',
'echarts/chart/bar', //按需加载图表关于bar图的部分
'echarts/chart/line' //按需加载图表关于线性图的部分
],
DrawCharts
);
6、特别提醒
1）、创建不同图表对象的时候需要注意方法内部关于init()初始化图表方法的时候其id要与需要状态当前图表容器id保持一致。
7、完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>ECharts-基本线性图</title>
<script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
padding: 10px;">
</div>
<div style="clear: both;">
<h3>
STEP DAY</h3>
<p>
我们只提供最直接、最具价值的信息，旨在：<a href="http://www.stepday.com/myblog/?echarts" target="_blank">www.stepday.com</a>
</p>
</div>
<script type="text/javascript" language="javascript">
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar', //按需加载图表关于bar图的部分
'echarts/chart/line' //按需加载图表关于线性图的部分
],
DrawCharts
);
///将画多个图表的进行函数封装
function DrawCharts(ec)
DrawColumnEChart(ec);
DrawLineEChart(ec);
//创建ECharts柱状图图表
function DrawColumnEChart(ec)
//--- 柱状图 ---
var myChart = ec.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading(
text: "图表数据正在努力加载..."
);
myChart.hideLoading();
myChart.setOption(
title:
text: "柱状图"
,
tooltip:
trigger: 'axis'
,
legend:
data: ['stepday.com', 'tuiwosa.com']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
],
yAxis: [
type: 'value',
splitArea: show: true
],
series: [
name: 'stepday.com',
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: 'tuiwosa.com',
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 ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myChart.on("click", function ()
alert("你点击我了!");
);
//创建ECharts折线图图表
function DrawLineEChart(ec)
//--- 折线图 ---
var myLineChart = ec.init(document.getElementById('mainLine'));
//图表显示提示信息
myLineChart.showLoading(
text: "图表数据正在努力加载..."
);
myLineChart.hideLoading();
myLineChart.setOption(
title:
text: "折线图"
,
tooltip:
trigger: 'axis'
,
legend:
data: ['stepday.com', 'tuiwosa.com']
,
toolbox:
show: false
,
calculable: true,
xAxis: [
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
],
yAxis: [
type: 'value',
splitArea: show: true
],
series: [
name: 'stepday.com',
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: 'tuiwosa.com',
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]
]
);
var ecConfig = require('echarts/config');
//ECharts图表的click事件监听
myLineChart.on("click", function ()
alert("你点击我了!");
);
</script>
</body>
</html>
以上是关于echarts 怎样在一个页面显示多张图表的主要内容，如果未能解决你的问题，请参考以下文章