|
1. Download the preceding frame and placed in the project.
2. Call in the js
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > ECharts < / title >
< / head >
< body >
< - Step:! 1 Prepare a dom for ECharts which (must) has size (width & hight) - >
< - Step:! 1 to prepare a ECharts with size (width and height) of Dom - >
< div id = "main"
style = "height: 500px; border: 1px solid #ccc; padding: 10px;" > < / div >
< div id = "mainMap"
style = "height: 500px; border: 1px solid #ccc; padding: 10px;" > < / div >
< - Step:! 2 Import echarts.js - >
< - Step:! 2 introduced echarts.js - >
< script src = "$ {base.contextPath} /js/echarts.js" > < / script >
< script type = "text / javascript"
src = "$ {base.contextPath} /js/jquery-1.6.2.min.js" > < / script >
< script type = "text / javascript" >
// Step: 3 conifg ECharts's path, link to echarts.js from current page .
// Step: 3 for the module loader configuration path echarts from the current page links to echarts.js, define the required chart a path
require.config ({
paths: {
echarts: '$ {base.contextPath} / js'
}
});
// Step:. 4 require echarts and use it in the callback
// Step: 4 dynamic loading echarts then started in the callback function to keep the demand loading structure is defined chart a path
$ (document) .ready (
function () {
$ .ajax ({
url: "? $ {Base.contextPath} / total / data type = 1",
type: 'get',
contentType: "application / json",
cache: false,
success: function (text) {
var data = text;
bar (data);
},
error: function (jqXHR, textStatus, errorThrown) {
btnSave.setEnabled (true);
if (400 == jqXHR.status || 403 == jqXHR.status
|| 500 == jqXHR.status)
return;
var text = "The operation failed," + jqXHR.responseText;
mini.alert (text);
}
});
});
// bar (null);
function bar (data) {
var sData = new Array ();
var sX = new Array ();
for (i = 0; i < data.length; i ++) {
sData [i] = data [i] .total;
sX [i] = data [i] .brand;
}
require ([ 'echarts', 'echarts / chart / bar', 'echarts / chart / line',
// 'echarts / chart / map'
], function (ec) {
// --- off column ---
var myChart = ec.init (document.getElementById ( 'main'));
myChart.setOption ({
tooltip: {
trigger: 'axis'
},
legend: {
data: [ 'Total']
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: [ 'line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: sX
}],
yAxis: [{
type: 'value',
splitArea: {
show: true
}
}],
series: [{
name: 'Total',
type: 'bar',
data: sData
},
/ * {
name: 'precipitation',
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]
} * /
]
});
});
}
< / script >
< / body >
< / html > |