cockpit.git - Gitblit

			@@ -76,198 +76,219 @@
			}
			self.$options.chartData.dataList = dataList;
			self.$options.chartData.dataName = dataName;
			self.gjjfzs = zsObj.告警机房总数;
			self.gjjfsbl = zsObj.告警机房数比例 + "%";
			self.$options.chartData.gjjfzs = zsObj.告警机房总数;
			self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
			self.optionSet(self.$options.chartData);
			console.log(res)
			}
			})
			}
			/*
			// 统计数据
			data:{
			dataList:[32, 43, 17, 27],
			dataName:['过压数量', '欠压数量', '缺项数量', '过流数量']
			}
			*/
			// const sideData = data.dataList.map(item => item + 1);//右边的面稍高一点
			console.log(this.$refs.echartsAlternating.offsetHeight);

			},
			optionSet(data){
			// let domHeight = this.$refs.echartsAlternating.offsetHeight;
			// 调试右侧柱子高度
			// let floatNumber = domHeight * 0.001;
			// if(domHeight<176){
			// floatNumber = 4.5
			// }
			// if(domHeight>175 && domHeight<326){
			// floatNumber = 2.5
			// }
			// if(domHeight>326 && domHeight<426){
			// floatNumber = 1.8
			// }
			// if(domHeight>425){
			// floatNumber = 1.2;
			// }
			const CubeLeft = echarts.graphic.extendShape({
			shape: {
			x: 0,
			y: 0
			},
			buildPath: function(ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c0 = [shape.x - 10, shape.y]
			const c1 = [shape.x + 10, shape.y]
			const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
			const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]]
			ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
			ctx.stroke();
			}
			})
			const CubeRight = echarts.graphic.extendShape({
			shape: {
			x: 0,
			y: 0
			},
			buildPath: function(ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c1 = [shape.x + 11, shape.y]
			const c2 = [xAxisPoint[0] + 11, xAxisPoint[1]]
			const c3 = [xAxisPoint[0] + 8 + 8, xAxisPoint[1] - 10]
			const c4 = [shape.x + 8 + 8, shape.y - 10]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
			ctx.stroke();
			}
			})
			const CubeTop = echarts.graphic.extendShape({
			shape: {
			x: 0,
			y: 0
			},
			buildPath: function(ctx, shape) {
			const c1 = [shape.x - 10, shape.y - 1]
			const c2 = [shape.x + 10, shape.y - 1]
			const c3 = [shape.x + 15, shape.y - 9]
			const c4 = [shape.x - 5, shape.y - 9]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
			ctx.stroke();
			}
			})
			echarts.graphic.registerShape('CubeLeft', CubeLeft)
			echarts.graphic.registerShape('CubeRight', CubeRight)
			echarts.graphic.registerShape('CubeTop', CubeTop)


			let option = {
			// backgroundColor: "#ffffff",
			tooltip: {
			trigger: 'axis',
			formatter: "{b} : {c}",
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
			type: 'shadow' // 默认为直线，可选为：'line' \| 'shadow'
			}
			},
			grid: {
			left: '10%',
			right: '5%',
			bottom: '10%',
			top: '17%',
			z: 22
			},
			// backgroundColor: "rgba(72, 84, 96,1.0)",
			xAxis: {
			type: 'category',
			data: data.dataName,
			//坐标轴
			show: true,
			axisLine: {
			show: true,
			lineStyle: {
			color: '#ccc'
			color: '#fff'
			}
			},
			//坐标值标注
			offset: 0,
			axisTick: {
			show: false,
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#fff',
			}
			fontSize: 12
			}
			},
			yAxis: {
			//坐标轴
			type: 'value',
			show: true,
			axisLine: {
			show: true,
			lineStyle: {
			color: '#ccc'
			color: 'white'
			}
			},
			//坐标值标注
			axisLabel: {
			show: true,
			textStyle: {
			color: '#fff',
			}
			},
			//分格线
			splitLine: {
			show:false,
			lineStyle: {
			color: '#000'
			}
			}
			},
			series: [{
			name: '交流ABC',
			tooltip: {
			show: true,
			position: 'top'
			},
			type: 'bar',
			barWidth: 24.5,
			markPoint: {
			itemStyle:{
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: "#0077EA" // 0% 处的颜色
			}, {
			offset: 1,
			color: "#451DD3" // 100% 处的颜色
			}], false),
			borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
			}, {
			offset: 1,
			color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
			}], false),
			},
			// data: [
			// { value: 32, xAxis: 0, yAxis: 34},
			// { value: 43, xAxis: 1, yAxis: 45},
			// { value: 17, xAxis: 2, yAxis: 19},
			// { value: 27, xAxis: 3, yAxis: 29},
			// ]
			data:function(){
			let thisArr = data.dataList.map((item,index)=>{
			let opt = {
			value:item,
			xAxis:index,
			yAxis:item// !=0?item + 2 : item//椭圆的坐标
			}
			return opt;
			})
			return thisArr;
			}()
			},
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			offset: 0,
			color: "#451DD3" // 0% 处的颜色
			}, {
			offset: 1,
			color: "#0077EA" // 100% 处的颜色
			}], false)
			}
			},
			data: data.dataList,
			barGap: 0
			}, {//侧右边配置
			type: 'bar',
			barWidth: 6.5,
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			offset: 0,
			color: "#2663DA" // 0% 处的颜色
			}, {
			offset: 1,
			color: "#69CCF6" // 100% 处的颜色
			}], false)
			}
			},
			barGap: 0,
			data: function(){
			const sideData = data.dataList.map(item =>{
			let list = item// !=0?item + floatNumber:item;
			return list;
			});//右边的面稍高一点
			return sideData;
			}()
			},
			{//盖子的配置
			name: 'b',
			tooltip: {
			show: false
			},
			type: 'pictorialBar',
			itemStyle: {
			// borderWidth: 1,
			// borderColor: '#00B6EE',
			color: '#00B6EE'
			axisTick: {
			show: false
			},
			// symbol: 'rect',
			// symbolOffset: [0, '-45%'],
			// symbolSize: [barWidth, barWidth],
			symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
			symbolSize: ['30', '12'],
			symbolOffset: ['0', '0'],
			// symbolRotate: -45,
			symbolPosition: 'end',
			data: data.dataList,
			z: 3
			}
			axisLabel: {
			fontSize: 12
			},
			},
			series: [{
			type: 'custom',
			renderItem: (params, api) => {
			console.log(14777, api.style().aaa)
			const location = api.coord([api.value(0), api.value(1)])
			return {
			type: 'group',
			children: [{
			type: 'CubeLeft',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: "#0077EA"//api.style().fill
			},
			{
			offset: 1,
			color: "#451DD3"//'rgba(210, 218, 226,1.0)'
			}
			])
			}
			},
			{
			type: 'CubeRight',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			offset: 0,
			color: "#2663DA"//api.style().fill
			},
			{
			offset: 1,
			color: "#69CCF6"//'rgba(210, 218, 226,1.0)'
			}
			])
			}
			},
			{
			type: 'CubeTop',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: "#00b6ee",
			}
			}
			]
			}
			},
			data: data.dataList
			},
			{
			type: 'bar',
			name: '交流ABC',
			tooltip: {
			show: true,
			position: 'top'
			},
			barWidth: 24.5,
			markPoint: {
			itemStyle:{
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: "#0077EA" // 0% 处的颜色
			}, {
			offset: 1,
			color: "#451DD3" // 100% 处的颜色
			}], false),
			borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
			}, {
			offset: 1,
			color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
			}], false),
			},
			data:function(){
			let thisArr = data.dataList.map((item,index)=>{
			let opt = {
			value:item,
			xAxis:index,
			yAxis:item// !=0?item + 2 : item//椭圆的坐标
			}
			return opt;
			})
			return thisArr;
			}()
			},
			barGap: 0,
			itemStyle: {
			color: 'transparent'
			},
			data: data.dataList
			}

			]
			};
			}
			this.setOption(option);
			},
			resize() {
			@@ -314,7 +335,7 @@
			}
			.titleShow .textTitle{
			display: inline-block;
			width: 9rem;
			/* width: 9rem; */
			text-align: right;
			font-size: 12px;
			color: rgb(0,178,224);

	src/assets/js/charts/persons/wangxuan.js	13 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/histogramAlternating.vue	351 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -11,13 +11,12 @@
			x: 0.35,
			y: 0.35,
			type: 'histogramAlternating',
			setData:null
			// {
			// dataList:[32, 43, 17, 27],
			// dataName:['过压数量', '欠压数量', '缺项数量', '过流数量'],
			// gjjfzs:"10",
			// gjjfsbl:"10%"
			// },
			setData:{
			dataList:[32, 43, 17, 27],
			dataName:['过压数量', '欠压数量', '缺项数量', '过流数量'],
			gjjfzs:"10",
			gjjfsbl:"10%"
			},
			}
			},{
			img: require("@/assets/images/monomerVoltage.png"),