其實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="/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>
轉載