web/SchedulingDashboard.git

			@@ -15,7 +15,7 @@
			<script>
			import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
			//引入echart
			import * as echarts from 'echarts'
			import * as echarts from "echarts";
			export default {
			components: {
			ChartTitle,
			@@ -23,197 +23,316 @@
			props: {},
			data() {
			return {
			chartData:{
			datax:['人员1', '人员2', '人员3', '人员4','人员5', '人员6'],
			datay:[120, 200, 150, 380, 470, 150, 230],
			}
			chartData: {
			datax: ["人员1", "人员2", "人员3", "人员4", "人员5", "人员6"],
			datay: [120, 200, 150, 380, 470, 150, 230],
			},
			};
			},
			mounted() {
			this.pieChart('chart',this.chartData)
			this.pieChart("chart", this.chartData);
			let chartData2 = [
			{ value: 10, name: "一类" },
			{ value: 20, name: "二类" },
			{ value: 60, name: "三类" },
			{ value: 10, name: "四类" },
			];
			this.getChartRight("chart2", chartData2);
			},
			watch: {},
			methods: {
			//在职
			pieChart(chartName,data){
			let chartDom = this.$refs[chartName]
			let myChart = echarts.init(chartDom);
			let option;
			let lineColor='#35ddc74d'
			if(data){
			option = {
			color:['#00FFFF','#dcb018'],
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'none'
			pieChart(chartName, data) {
			let chartDom = this.$refs[chartName];
			let myChart = echarts.init(chartDom);
			let option;
			let lineColor = "#35ddc74d";
			if (data) {
			option = {
			color: ["#00FFFF", "#dcb018"],
			tooltip: {
			trigger: "axis",
			axisPointer: {
			type: "none",
			},
			},
			grid: {
			right: "80px",
			bottom: "60px",
			left: "60px",
			top: "30px",
			},
			dataZoom: [
			{
			type: "inside",
			// show: true, //显示滚动条
			start: 0,
			end: 100,
			yAxisIndex: 0,
			minSpan: 20,
			maxSpan: 100,
			// handleSize: 8
			},
			{
			// type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
			type: "inside",
			// show: true,
			// realtime : true,
			yAxisIndex: 0,
			minSpan: 20,
			maxSpan: 100,
			start: 0,
			end: 100,
			},
			],
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			itemGap: 35, //间距
			bottom: "5px",
			left: "center",
			},
			yAxis: [
			{
			type: "category",
			axisTick: {
			show: false,
			},
			axisLine: {
			show: true,
			lineStyle: {
			color: lineColor,
			},
			},
			grid: {
			right: "80px",
			bottom:'60px',
			left:'60px',
			top:'30px',
			axisLabel: {
			// rotate:45,
			margin: 10,
			show: true,
			textStyle: {
			color: function (params, index) {
			let colorList = ["#dcb018", "#00FFFF"];
			if (index % 2 == 0) {
			return colorList[0];
			} else {
			return colorList[1];
			}
			},
			},
			},
			dataZoom: [
			{
			type: 'inside',
			// show: true, //显示滚动条
			start:0,
			end: 100,
			yAxisIndex: 0,
			minSpan:20,
			maxSpan:100,
			// handleSize: 8
			data: data.datax ? data.datax : [],
			},
			],
			xAxis: [
			{
			type: "",
			name: "单位：件",
			// min: data.yAxis[0].min?data.yAxis.min:0,
			minInterval: 1, //坐标轴是整数
			max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //数据最大值加3
			interval:
			(Math.ceil(eval(`Math.max(${data.datay})`) / 7) * 7) / 7,
			position: "left",
			axisLine: {
			show: true,
			lineStyle: {
			color: "#0a112B",
			},
			{
			// type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
			type: 'inside',
			// show: true,
			// realtime : true,
			yAxisIndex: 0,
			minSpan:20,
			maxSpan:100,
			start: 0,
			end: 100
			},
			],
			legend: {
			itemWidth: 8,
			itemHeight: 8,
			itemGap: 35,//间距
			bottom:'5px',
			left:'center',
			},
			yAxis: [
			{
			type: 'category',
			axisTick: {
			show: false
			},
			axisLine: {
			show: true,
			lineStyle: {
			color:lineColor,
			}
			},
			axisLabel:{
			// rotate:45,
			margin: 10,
			show: true,
			textStyle: {
			color:function(params,index){
			let colorList=['#dcb018','#00FFFF']
			if(index % 2 == 0){
			return colorList[0]
			}else{
			return colorList[1]
			}
			}
			},
			},
			data: data.datax?data.datax:[],
			}
			],
			xAxis: [
			{
			type: '',
			name: '单位：件',
			// min: data.yAxis[0].min?data.yAxis.min:0,
			minInterval: 1,//坐标轴是整数
			max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//数据最大值加3
			interval: Math.ceil(eval( `Math.max(${data.datay})`)/7)*7 / 7,
			position: 'left',
			axisLine: {
			show: true,
			lineStyle: {
			color:'#0a112B',
			}
			},
			nameTextStyle:{
			color:"#00FFFF",
			},
			splitLine: {
			show: true,
			lineStyle: {
			// 使用深浅的间隔色
			color: lineColor,
			}
			},
			axisTick: {
			show: false
			},

			axisLabel: {
			textStyle: {
			color: '#00FFFF'
			},

			}
			nameTextStyle: {
			color: "#00FFFF",
			},
			splitLine: {
			show: true,
			lineStyle: {
			// 使用深浅的间隔色
			color: lineColor,
			},
			],
			series:[
			{
			type: 'bar',
			name: '',
			barWidth: '15',
			label:{
			show:true,
			position:'right',
			color: '#00FFFF'
			},
			itemStyle: {
			normal: {
			//柱形图圆角，初始化效果
			barBorderRadius:[4, 4, 0, 0],
			color:function(params){
			let colorList=['#dcb018','#00FFFF']
			if(params.dataIndex % 2 == 0){
			return colorList[0]
			}else{
			return colorList[1]
			}
			}
			},
			},
			data: data.datay,
			},
			]
			};
			},
			axisTick: {
			show: false,
			},

			option && myChart.setOption(option);
			}else{
			option={};
			myChart.setOption(option,true);
			}
			},
			axisLabel: {
			textStyle: {
			color: "#00FFFF",
			},
			},
			},
			],
			series: [
			{
			type: "bar",
			name: "",
			barWidth: "15",
			label: {
			show: true,
			position: "right",
			color: "#00FFFF",
			},
			itemStyle: {
			normal: {
			//柱形图圆角，初始化效果
			barBorderRadius: [4, 4, 0, 0],
			color: function (params) {
			let colorList = ["#dcb018", "#00FFFF"];
			if (params.dataIndex % 2 == 0) {
			return colorList[0];
			} else {
			return colorList[1];
			}
			},
			},
			},
			data: data.datay,
			},
			],
			};

			option && myChart.setOption(option);
			} else {
			option = {};
			myChart.setOption(option, true);
			}
			},
			getChartRight(chartName, data) {
			let chartDom = this.$refs[chartName];
			let myChart = echarts.init(chartDom);
			let img = "/cockpitPage/dotted-circle.png";
			let option;
			if (data) {
			option = {
			color: ["#dcb018", "#735b09", "#ebd68e", "#c7b36e"],
			tooltip: {
			trigger: "item",
			},
			graphic: {
			elements: [
			{
			type: "image",
			z: 3,
			style: {
			image: img,
			width: 238,
			height: 238,
			},
			left: "center",
			top: "center",
			position: [10, 10],
			},
			],
			},
			series: [
			{
			name: "Access From",
			type: "pie",
			// center: ['80%', '46%'],
			radius: ["52%", "62%"],
			// minAngle: 20,
			// startAngle: 60,
			avoidLabelOverlap: false,

			label: {
			normal: {
			position: "outer",
			padding: [0, -62],
			color: "#01f7fd",
			fontSize: 12,
			borderWidth: 5,
			borderRadius: 4,
			formatter: function (params) {
			return `{a\|${params.name}} {b\|${params.value + "%"}}`;
			},
			rich: {
			a: {
			color: "#00ffff",
			fontSize: 14,
			},
			b: {
			color: "#fccd1d",
			fontSize: 14,
			},
			},
			},
			},
			emphasis: {
			label: {
			show: true,
			fontSize: 12,
			fontWeight: "bold",
			color: "#dcb018",
			},
			},
			labelLine: {
			show: true,
			length: 4,
			length2: 80,
			lineStyle: {
			color: "#dcb018",
			},
			},
			labelLayout: {
			verticalAlign: "bottom",
			dy: -5,
			},
			data: data,
			},
			],
			};

			option && myChart.setOption(option);
			} else {
			option = {};
			myChart.setOption(option, true);
			}
			},
			},
			};
			</script>

			<style scoped lang="scss">
			.bar-chart{
			width:100%;
			height:calc(100% - 20px);
			padding:20px 0 0;
			.bar-contents{
			width:100%;
			height:calc(100% - 60px);

			.chart-left{
			width: 50%;
			height:100%;
			border:1px solid #00FFFF;
			box-sizing: border-box;
			.bar-chart {
			width: 100%;
			height: calc(100% - 20px);
			padding: 20px 0 0;

			.bar-contents {
			width: 100%;
			height: calc(100% - 60px);

			.chart-left {
			width: calc(60% - 20px);
			height: 100%;
			margin-right: 20px;
			float: left;
			border: 1px solid #00ffff;
			box-sizing: border-box;
			}

			.chart-right {
			width: 40%;
			float: left;
			height: 100%;
			position: relative;
			.chart-bg {
			width: 100%;
			position: absolute;
			top: 0;
			right: 0;
			img {
			width: 100%;
			}
			}
			.chart-right{
			width: 50%;
			height:100%;
			.chart {
			position: absolute;
			top: 0;
			right: 0;
			}
			.chart{
			width:100%;
			height:100%;
			}
			}

			.chart {
			width: 100%;
			height: 100%;
			}
			}
			}
			</style>