EChart 아이콘 컨트롤 에 대한 간단 하고 실 용적 입 니 다.
2. js 에서 호출
<!DOCTYPE html>
<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 ECharts （ ） 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 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 echarts ， echarts.js，
require.config({
paths : {
echarts : '${base.contextPath}/js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 echarts ，
$(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 = " ，" + 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) {
//--- ---
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger : 'axis'
},
legend : {
data : [ ' ' ]
},
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 : ' ',
type : 'bar',
data : sData
},
/* {
name:' ',
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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
