1.下載echars包（這里我用的是echars-2.0.0版本的）
2.在html中添加引用標簽
<script src="${basePath}/assets/plugins/echars-2.0.0/js/esl.js"></script>
<script src="${basePath}/assets/plugins/echars-2.0.0/js/echarts.js"></script>
<#macro body>
<div id="main" class="main" style="height:600px;"></div>
</#macro>
3.在js中
$(document).ready(function(){
$('#search_anniu').hide();
require.config({
paths:{
'echarts':'./js/echarts',
'echarts/chart/bar' : './js/echarts', // 把所需圖表指向單文件
'echarts/chart/line': './js/echarts'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加載所需圖表
'echarts/chart/bar'
],
function (ec) {
doselLoca();
}
);
});
function doselLoca(){
var dataLocationName=[];
var conL=[];
var counts=[];
var cha=[];
var title="各區庫查看";
$.ajax({
url: fixUrl('/record/eRecoreLtMap/selLoca'),
type: 'post',
cache: false,
success: function(data, textStatus, jqXHR) {
for(var i=0;i<data.length;i++){
dataLocationName[i]=data[i].dic_name;
conL[i]=data[i].conL;
counts[i]=data[i].counts;
cha[i]=counts[i]-conL[i];
}
document.getElementById("godiv").style.display='none';
optiont(dataLocationName,conL,counts,title,cha);
},
error:function(msg,textStatus, errorThrown) {
alertMsg(errorThrown);
alertMsg("網絡錯誤或者處理異常，請重試或者聯系管理員處理！錯誤信息：" + msg.responseText);
}
});
}
function optiont(dataLocationName,conL,counts,title,cha){
var myChart = require('echarts').init(main);
var ecConfig = require('echarts/config');
var option = {
title : {
text: title,
subtext: '',
textStyle :{color:'#66CDAA'}
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'none' // 默認為直線，可選為：'line' | 'shadow'},
formatter: function (value) {//鼠標事件
var sum="";
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == value[0][1]) {
sum=value[0][2]+value[1][2];
return value[0][1]+typeFlay + '<br/>'
+ '庫存總量：'+ sum + "個"+'<br/> '
+ '已使用量：'+ value[0][2] + "個"+'<br/> '
+ '未使用量：'+ value[1][2] + "個"+'<br/> ';
}
}
}
},
legend: {
selectedMode:false,
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 : false,//設置拖拽效果
xAxis : [{
type : 'category',
data : dataLocationName,
axisLabel : { formatter: '{value}'+typeFlay //每組的單位}
}],
yAxis : [{
type : 'value',
name:'單位：個'
}],
series : [{
name:'已使用量',
type:'bar',
stack: 'sum',
barCategoryGap: '50%',
itemStyle: {
normal: {
color: '#66CDAA',//插件有自己的顏色，你可以自己設置顏色
borderColor: '#66CDAA',
borderWidth: 6,
borderRadius:0,
label : { show: true, position: 'insideTop'}
}
},
data:conL
},
{
name:'庫存總量',
type:'bar',
data:cha,
stack: 'sum',
itemStyle: {
normal: {
color: '#fff',
borderColor: '#66CDAA',
borderWidth: 6,
borderRadius:0,
label : {
show: true,
position: 'top',
textStyle: {color: 'tomato' }
}
}
}
}
] };
myChart.on(ecConfig.EVENT.CLICK,eConsole); //做點擊事件時使用
myChart.setOption(option);
}
最終顯示結果：
