czapp/pages/tongji/tongji.js

(function () {
    var page = {
        init: function ($page) {
			//扇形图数据
			chartMap = {};
			chartMap['chart-bingtu'] = echarts.init(document.getElementById('chart-bingtu'));
			var data = [{"name":"测试11","value":"9000.00"},{"name":"测试22","value":"100900.00"},{"name":"测试33","value":"0.00"}];
			var data2 = [{"name":"9000.00","value":"9000.00"},{"name":"100900.00","value":"100900.00"},{"name":"0.00","value":"0.00"}];
			//renlian.httpget("", { type: 'chart', id: _item.F_Id }, function(data) {
			//var type = $('#' + data.Id).attr('data-desktop');
			var legendData = [];
			$.each(data, function (_index, _item) {
				legendData.push(_item.name + _item.value);
				var data3 = {};
				data3.name = _item.name + _item.value;
				data3.value = _item.value;
				data2.push(data3);
			});
			console.log(data2);
			console.log(legendData);
			var xData = [];
			for(let i = 0;i < 5; ++i){
				var time = new Date(new Date() - 24*60*60*1000*i);
				var date = time.Format("yy-MM-dd");
				xData.push(date);
			}
			// var option = {};
			// option.tooltip = {
			// 	trigger: 'item',
			// 	formatter: "{a} <br/>{b}: {c} ({d}%)"
			// };
			// option.legend = {
			// 	orient: 'vertical',
			// 	left: 'right',
			// 	data: legendData
			// };
			// option.series = [{
			// 	name: '占比',
			// 	type: 'pie',
			// 	radius : '55%',
			// 	center: ['40%', '60%'],
			// 	itemStyle: {
			// 		emphasis: {
			// 			shadowBlur: 10,
			// 			shadowOffsetX: 0,
			// 			shadowColor: 'rgba(0, 0, 0, 0.5)'
			// 		}
			// 	},
			// 	data: data2
			// }];

			var option1 = {
				title:{
					text: '近期行驶里程',
					x:'center',
				},
				color: ['#3398DB'],
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : xData,
						axisTick: {
							alignWithLabel: true
						},
					}
				],
				yAxis : [
					{
						name: '里程/公里',
						type : 'value'
					}
				],
				series : [
					{
						name:'行驶里程',
						type:'bar',
						barWidth: '50%',
						data:[10, 52, 50, 34, 40, 30, 20]
					}
				]
			};
			
			//option.color = ['#df4d4b', '#304552', '#52bbc8', 'rgb(224,134,105)', '#8dd5b4', '#5eb57d', '#d78d2f'];
			chartMap['chart-bingtu'].setOption(option1);
			
			//列表数据
			//renlian.httpget(config.webapi + "renlian/adms/desktop/data", { type: 'Target', id: _item.F_Id }, function(data){});
			var drivingdata = '[{"name":"里程总计","value":"236.00km"},{"name":"累计时长","value":"0天24时00分"},{"name":"平均速度", "value":"9.83km/h"}]';
			data = JSON.parse(drivingdata);
			var _itemHtml = ''
			$.each(data, function (_index, _item) {
				if(_index == 2){
					_itemHtml += '\
					<div style="flex: 0 0 100%;height:120px;padding-top: 40px;" class="targetItem">\
						<div class="number">'+ _item.value + '</div>\
						<div class="name">'+  _item.name +'</div>\
					</div>';
				}else{
					_itemHtml += '\
						<div style="flex: 0 0 50%;height:120px;padding-top: 40px;" class="targetItem">\
							<div class="number">'+ _item.value + '</div>\
							<div class="name">'+  _item.name +'</div>\
						</div>';
				}
				$page.find('#driving-data').html(_itemHtml);
			}); 
        }
    };
    return page;
})();