EChart 关于图标控件的简单实用
EChart 关于图标控件的简单实用
１．下载前段框架并放入项目中去．
２．在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>
本文永久更新链接地址：
评论暂时关闭