app-big-data/component/intelligentDevice/device-chart.js

(function() {

	Vue.component('device-chart', {
		template: '<div style="position:relative;height:100%;">\
						<div class="sk-spinner sk-spinner-chasing-dots" v-show="!isRequestEnd" style="top: 50%;left:50%;margin-left:-0.1rem;margin-top: -0.1rem;position:absolute;">\
				            <div class="sk-dot1"></div>\
				            <div class="sk-dot2"></div>\
				       </div>\
						<div id="chart-main" v-show="isRequestEnd"></div>\
					</div>',
		props: [],
		data: function() {
			return {
				isRequestEnd: false
			}
		},
		mounted: function() {
			var vm = this;
			getRequestData(vm);
		}
	})

	function getRequestData(vm) {
		//设备发放情况
		intelligentAPI.equipmentDistribution({}).then(function(res) {
			if(res.status == 200) {
				var equipmentArr = res.data;
				equipmentArr = equipmentArr.reverse();//因为柱状图降序排列
				var nameArr = _.map(equipmentArr, function(equipmentData) {
					return equipmentData.name;
				})
				var dataArr = _.map(equipmentArr, function(equipmentData) {
					return equipmentData.num;
				})
				chartGenerate(nameArr, dataArr);
				vm.isRequestEnd = true;
			} else {
				toastr.error(res.msg)
			}
		})
	}

	function chartGenerate(nameArr, dataArr) {
		//【设备发放情况】柱状图
		var myChart = echarts.init(document.getElementById("chart-main"));
		var option = {
			calculable: false,
			grid: {
				borderWidth: 0,
				containLabel:true
			},
			yAxis: [{
				type: 'category',
				axisLabel: {
					margin: 15,
					textStyle: {
						color: "#B5E1FC",
						fontSize: 14
					}
				},
				axisLine: {
					lineStyle: {
						type: 'solid',
						color: '#B5E1FC', //左边线的颜色
						width: '1' //坐标线的宽度
					}
				},
				axisTick: {
					show: false
				},
				splitArea: {
					show: false
				},
				splitLine: {
					show: false
				},
				data: nameArr
			}],
			xAxis: [{
				type: 'value',
				axisTick: {
					show: false
				},
				splitArea: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						type: 'solid',
						color: '#B5E1FC', //左边线的颜色
						width: '1' //坐标线的宽度
					}
				},
				axisLabel: {
					margin: 15,
					textStyle: {
						color: "#B5E1FC",
						fontSize: 14
					}
				}
			}],
			series: [{
				name: '设备发放情况',
				type: 'bar',
				itemStyle: {
					normal: {
						barBorderRadius: [0, 50, 50, 0],
						color: '#009DFE',
						label: {
							show: true,
							position: 'right',
							textStyle: {
								color: "#B5E1FC",
								fontSize: 14
							}
						}
					}
				},
				barWidth: 16, //柱图宽度 
				data: dataArr,
			}]
		};
		myChart.setOption(option);
	}

})()