前段時間有點忙，今天得空趕緊繼續移植工作，今天要說一說多資料來源的配置，自定義複雜查詢，以及圖表的操作，

當然還是根據業務需求來，最近客戶想讓我在新系統上加一個銷售彙總的功能(按月統計各個部門的銷售額)，廢話

不多說，先上最終的效果圖

因為彙總的資料都來源於舊系統，所以這裡就需要用到多資料來源的操作，其實JEESITE4多資料來源的配置很簡單，

jeesite.yml配置如下

當然首先我得定義entity，因為舊系統的表結構跟jeesite要求的不一樣，所以我就放棄了繼承DataEntity，自己定義了一個簡單的entity

entity有了，那麼我得定義自己的dao方法，沒有繼承jeesite的CrudDao，理由同上

dao實現如下

然後就是service呼叫，controller中url的配置

ここまで、後臺的處理完了，然後就是前臺的處理了，剩下就是前臺ajax設定echarts了，百度一下一堆，就不說了，直接貼程式碼

<div class="box-footer">
			<div class="row">
				<div class="col-sm-4 col-xs-6">
					<div class="description-block border-right">
						<span class="description-percentage text-green"><i class="fa fa-caret-right"></i> <span id="copyTotalsRate"> </span></span>
						<h5 id="copyTotals" class="description-header">￥0</h5>
						<span class="description-text">影象部</span>
					</div>
					<!-- /.description-block -->
				</div>
				<!-- /.col -->
				<div class="col-sm-4 col-xs-6">
					<div class="description-block border-right">
						<span class="description-percentage text-green"><i class="fa fa-caret-right"></i> <span id="mountTotalsRate"> </span></span>
						<h5 id="mountTotals" class="description-header">￥0</h5>
						<span class="description-text">裝裱部</span>
					</div>
					<!-- /.description-block -->
				</div>
				<!-- /.col -->
				<div class="col-sm-4 col-xs-6">
					<div class="description-block border-right">
						<span class="description-percentage text-green"><i class="fa fa-caret-right"></i> <span id="frameTotalsRate"> </span></span>
						<h5 id="frameTotals" class="description-header">￥0</h5>
						<span class="description-text">裝框部</span>
					</div>
					<!-- /.description-block -->
				</div>
			</div>
			<!-- /.row -->
		</div>
<script src="${ctxStatic}/echarts/echarts.js?${_version}"></script>
<script>
var nowDate = new Date();
var curYear = nowDate.getFullYear();
var curMonth = nowDate.getMonth() + 1;
if (curMonth < 10) {
	curMonth = "0" + curMonth;
}
$("#yearMonthStart").val(curYear + "/01");
$("#yearMonthEnd").val(curYear + "/" + curMonth);

var yearMonthStart = $("#yearMonthStart").val().replace("/", "");
var yearMonthEnd = $("#yearMonthEnd").val().replace("/", "");
//基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('myChart'));

var option = {
    title : {
        text: '部門月度銷售額',
        subtext: '單位（元）'
    },
    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 : []
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'影象部',
            type:'bar',
            data:[]
        },
        {
            name:'裝裱部',
            type:'bar',
            data:[]
        },
        {
            name:'裝框部',
            type:'bar',
            data:[]
        }
    ]
};
drawCharts();


function search() {
	getSearchConf();
	drawCharts();
}

function getSearchConf() {
	yearMonthStart = $("#yearMonthStart").val().replace("/", "");
	yearMonthEnd = $("#yearMonthEnd").val().replace("/", "");
}

function drawCharts() {
	$.ajax({
		type:"POST",
		url:"${ctx}/finance/salesPerformance/find",
		data : {"yearMonthStart":yearMonthStart,"yearMonthEnd":yearMonthEnd},
		dataType:"json",
		success: function(result){
			var linNames = [];
			var linCopyTotals = [];
			var linMountTotals = [];
			var linFrameTotals = [];
			
			var copyTotals = 0.0;
			var mountTotals = 0.0;
			var frameTotals = 0.0;
            $.each(result, function(idx, values) {
            	linNames.push(parseInt(values.yearMonth.substring(4)) + "月");
            	linCopyTotals.push(values.copyTotals);
            	linMountTotals.push(values.mountTotals);
            	linFrameTotals.push(values.frameTotals);
            	
            	copyTotals = copyTotals + values.copyTotals;
            	mountTotals = mountTotals + values.mountTotals;
            	frameTotals = frameTotals + values.frameTotals;
            });
            option.xAxis[0].data = linNames;
            option.series[0].data = linCopyTotals;
            option.series[1].data = linMountTotals;
            option.series[2].data = linFrameTotals;
            myChart.setOption(option);
            
            var total = copyTotals + mountTotals + frameTotals;
            
            $("#copyTotals")[0].innerHTML = FormatMoney(copyTotals.toString());
            $("#mountTotals")[0].innerHTML = FormatMoney(mountTotals.toString());
            $("#frameTotals")[0].innerHTML = FormatMoney(frameTotals.toString());
            
            $("#copyTotalsRate")[0].innerHTML = Math.round(copyTotals / total * 100) + "%";
            $("#mountTotalsRate")[0].innerHTML = Math.round(mountTotals / total * 100) + "%";
            $("#frameTotalsRate")[0].innerHTML = Math.round(frameTotals / total * 100) + "%";
		}
	});
}

function FormatMoney(s) {  
    if (/[^0-9\.]/.test(s)) return "invalid value";  
    s = s.replace(/^(\d*)$/, "$1.");  
    s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");  
    s = s.replace(".", ",");  
    var re = /(\d)(\d{3},)/;  
    while (re.test(s))  
        s = s.replace(re, "$1,$2");  
    s = s.replace(/,(\d\d)$/, ".$1");  
    return "￥" + s.replace(/^\./, "0.")  
}
</script>