h5-elab-open-ownerUnion/components/charts/blueHorBarChartOne.vue

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="top-Section">
			<view class="title" v-if="type=='default'">{{title}}</view>
			<view class="leftBtn" v-if="type=='type1'" @click='leftBtnAction'>
				<view class="btnName">
					{{title}}
				</view>
				<image class="btnIcon" src="../../static/icons/icon_drop_black@2x.png" mode=""></image>
			</view>
			<view class="explainBtn" @click="explainAction" v-if="title!='识别类别'&&title!='项目排名'&&title!='到访类别'&&title!='认证方式' && title!='成交业态' && title!='活动统计'">
				<image class="explainImg" src="../../static/icons/icon_introduce@2x.png" mode=""></image>
			</view>
			<view class="rightBtn" @click="rightBtnAction" v-if="rightTitle.length > 0">
				<view class="btnName">
					{{rightTitle}}
				</view>
				<image class="btnIcon" v-if="rightType == 'default'" src="../../static/icons/icon_dropDown@2x.png" mode=""></image>
				<view class="btnIcon" v-else></view>
			</view>
		</view>
		<view style="position: relative;">
			<view style="width: 100%; height: 260rpx; min-height: 260rpx;display: flex;flex-direction: column;align-items: center; margin-top: 0;margin-left: 0;"
			 v-if="dataList.length==0">
				<image src="../../static/icons/empty_bb.png" mode="" style="width: 283rpx;height: 227rpx;"></image>
				<text style="opacity: 0.35;font-size: 28rpx;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;text-align: center;color: #202638;">暂时没有{{emptyDesc}}</text>
			</view>
			<view>
				<view v-if="dataList.length>0" class="lineView" :style="`background-color: ${isThemeColor ? themeColor: fuzhuColor}; height: ${(nameList.length * 60 - 40) + 'rpx'} `"></view>
				<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" ref="chartId" :id="chartId"
				 class="echarts" v-if="fuzhuColor50!=null" :style="`height: ${(nameList.length * 60) + 'rpx'}`"></view>

				<view class="clickDiv">
					<view class="clickDiv-item" v-for="(item, index) in nameList" :key="index" style="height: 70px" @click="showAllName(item)"></view>
				</view>
			</view>
		</view>

		<view class="goMoreData" @click="getMoreDataAction" v-if="isShowMore">查看更多></view>
		<!-- #endif -->
		<view class="toastDiv" v-show="isShowToast">
			<view class="toast">{{toastStr}}</view>
		</view>
		<dm-explain-picker :title="explainTitle" :chartId="chartId" :isJiTuanCeng="isJiTuanCeng" :brandSelected="brandSelected" ref="dmExplainPicker"></dm-explain-picker>
	</view>
</template>

<script>
	import echarts from '../../static/echarts.js'
	import dmExplainPicker from '../subComponents/dmExplainPicker.vue'

	export default {
		props: {
			themeColor: null,
			fuzhuColor: null,
			themeColor50: null,
			themeColor25: null,
			fuzhuColor50: null,
			chartId: String,
			title: String,
			rightTitle: String,
			isThemeColor: {
				type: Boolean,
				default: true
			},
			unit: {
				type: String,
				default: '%'
			},
			dataList: Array,
			yDataList: Array,
			isShowMore: {
				type: Boolean,
				default: false
			},
			dataCount: {
				type: Number,
				default: 6
			},
			emptyDesc: {
				type: String,
				default: "数据"
			},
			type: {
				type: String,
				default: 'default'
			},
			rightType: {
				type: String,
				default: 'default'
			},
			isJiTuanCeng:{
				type: Boolean,
				default: false
			},
			brandSelected: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				y2DataList: [],
				explainTitle: '',
				nameList: [],
				option: {
					// tooltip: {
					// 	formatter: '{b}',
					// 	// trigger: 'item',
					// 	// align: 'auto',
					// 	extraCssText: 'z-index:50',
					// 	// hideDelay: 2000,
					// 	// formatter: function(e) {
					// 	// 	// // console.log('tooltip打印：', e)
					// 	// 	return e.name
					// 	// }
					// },
					grid: {
						left: '36%',
						right: '20%',
						top: '0%',
						bottom: '0%',
						containLabel: false
					},
					xAxis: {
						type: 'value',
						show: false
					},
					yAxis: [{
							type: 'category',
							data: [],
							triggerEvent: true,
							inverse: true,
							axisLabel: { //坐标轴刻度标签的相关设置。
								margin: 115,
								align: 'left',
								// backgroundColor: '#FEE1A7',
								interval: 0,
								textStyle: {
									color: '#393939',
									fontFamily: 'Verdana',
									fontSize: 14,
									// lineHeight: 7,
								}
							},
							axisTick: { //坐标轴刻度相关设置。
								show: false,
							},
							axisLine: { //坐标轴轴线相关设置
								show: false
							},
						},
						{
							type: 'category',
							data: [],
							inverse: true,
							axisLabel: { //坐标轴刻度标签的相关设置。
								margin: 60,
								align: 'right',
								textStyle: {
									color: '',
									fontFamily: 'Verdana',
									fontSize: 14,
								},
								// formatter: (a) => {
								// 	return a + '%'
								// },
							},
							axisTick: { //坐标轴刻度相关设置。
								show: false,
							},
							axisLine: { //坐标轴轴线相关设置
								show: false
							}
						},
					],
					series: {
						name: '',
						type: 'bar',
						barWidth: 6,
						data: [],
						itemStyle: { //图形样式
							normal: {
								barBorderRadius: 3,
								color: ''
							},
						}
					}
				},
				isShowToast: false,
				toastStr: ''
			}
		},

		mounted() {},

		methods: {
			getDataAction() {
				this.option.series.data = []
				this.option.yAxis[0].data = []
				this.option.yAxis[1].data

				this.option.series.data = this.dataList
				// // console.log("getDataAction -> this.dataList", this.chartId, this.dataList)
				var yTempDataList = JSON.parse(JSON.stringify(this.yDataList.length > 6 ? this.yDataList.slice(0, 6) : this.yDataList))
				this.nameList = JSON.parse(JSON.stringify(this.yDataList.length > 6 ? this.yDataList.slice(0, 6) : this.yDataList))
				for (var i = 0; i < yTempDataList.length; i++) {
					let item = yTempDataList[i]
					if (item.length > 7) {
						yTempDataList[i] = item.slice(0, 7) + "..."
					}
				}
				// for (var i = 0; i < yTempDataList.length; i++) {
				// 	let item = yTempDataList[i]
				// 	// if (item.length > 5) {
				// 	// 	yTempDataList[i] = item.slice(0, 5) + "..."
				// 	// 	// yTempDataList[i] = item.join()
				// 	// 	// yTempDataList[i] = this.insertStr()
				// 	// }

				// 	var newParamsName = ""; // 最终拼接成的字符串
				// 	var paramsNameNumber = item.length; // 实际标签的个数
				// 	var provideNumber = 6; // 每行能显示的字的个数
				// 	var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
				// 	/**
				// 	 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
				// 	 */
				// 	// 条件等同于rowNumber>1
				// 	if (paramsNameNumber > provideNumber) {
				// 		/** 循环每一行,p表示行 */
				// 		for (var p = 0; p < rowNumber; p++) {
				// 			var tempStr = ""; // 表示每一次截取的字符串
				// 			var start = p * provideNumber; // 开始截取的位置
				// 			var end = start + provideNumber; // 结束截取的位置
				// 			// 此处特殊处理最后一行的索引值
				// 			if (p == rowNumber - 1) {
				// 				// 最后一次不换行
				// 				tempStr = item.substring(start, paramsNameNumber);
				// 			} else {
				// 				// 每一次拼接字符串并换行
				// 				tempStr = item.substring(start, end) + "\n";
				// 			}
				// 			newParamsName += tempStr; // 最终拼成的字符串
				// 		}

				// 	} else {
				// 		// 将旧标签的值赋给新标签
				// 		newParamsName = item;
				// 	}
				// 	//将最终的字符串返回
				// 	yTempDataList[i] = newParamsName

				// 	if (yTempDataList[i].length > 12) {
				// 		yTempDataList[i] = yTempDataList[i].slice(0, 12) + '...'
				// 	}

				// }

				// console.log("当前数，--+pp", yTempDataList)
				this.option.yAxis[0].data = yTempDataList
				this.y2DataList = []
				var self = this
				this.dataList.forEach((item, index) => {
					self.y2DataList.push((item + self.unit))
				})
				var y2TempDataList = this.y2DataList.length > 6 ? this.y2DataList.slice(0, 6) : this.y2DataList
				this.option.yAxis[1].data = y2TempDataList
				// this.reloadColor()
				// console.log('柱状图A数据刷新', this.option)
                uni.$emit('onchanged')
			},
			// insertStr(soure, start, newStr){   
			//    return soure.slice(0, start) + newStr + soure.slice(start);
			// }
			reloadColor() {
				this.option.series.itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
					offset: 0,
					color: this.isThemeColor ? this.themeColor : this.fuzhuColor
				}, {
					offset: 1,
					color: this.isThemeColor ? this.themeColor50 : this.fuzhuColor50
				}])
				this.option.yAxis[1].axisLabel.textStyle.color = this.isThemeColor ? this.themeColor : this.fuzhuColor
			},
			onViewClick(options) {
				// console.log(options)
				if (options && options.test) {
					uni.showToast({
						icon: 'none',
						title: options.test
					})
				}
			},
			rightBtnAction() {
				this.$emit('chartRightBtnAction', this.chartId)
			},
			leftBtnAction() {
				this.$emit('chartLeftBtnAction', this.chartId)
			},
			getMoreDataAction() {
				this.$emit('chartGetMoreDataAction', this.chartId)
			},
			explainAction() {
				this.$refs.dmExplainPicker.show()
			},
			showAllName(e) {
				// console.log('名字打印：', e)
				// uni.showToast({
				// 	icon: 'none',
				// 	title: e,
				// 	duration: 1000
				// })
				this.toastStr = e
				this.isShowToast = true
				var self = this
				var timer = setTimeout(function() {
					self.isShowToast = false
					clearTimeout(timer)
				}, 2000);
			}
		},
		components: {
			dmExplainPicker
		},
		watch: {
			// chartId: {
			// 	handler(e) {
			// 		this.getDataAction()
			// 	},
			// 	immediate: true
			// },
			dataList: {
				handler(e) {
					this.getDataAction()
				},
				immediate: true
			},
			yDataList: {
				handler(e) {
					this.getDataAction()
				},
				immediate: true
			},
			themeColor: {
				handler(e) {
					this.reloadColor()
				},
				immediate: true
			},
			title: {
				handler(e) {
					this.explainTitle = e
				},
				immediate: true
			}
		}

	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			this.initAction();
		},
		methods: {
			initAction() {
				if (typeof window.echarts === 'function') {
					this.initEcharts();
				} else {
					// 动态引入较大类库避免影响页面展示
					const script = document.createElement('script')
					// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
					script.src = 'static/echarts.js'
					script.onload = this.initEcharts.bind(this)
					document.head.appendChild(script)
				}
			},
			initEcharts() {
				// console.log("initEcharts -> this.$refs", this.$refs.chartId.$el.id)
				myChart = echarts.init(document.getElementById(this.$refs.chartId.$el.id))
				// 观测更新的数据在 view 层可以直接访问到
				if (myChart) {
					myChart.setOption(this.option)
					myChart.resize();
					var self = this
					myChart.on('mousemove', function(params) {
						// console.log('parmas mouseover 打印：', params)
						if (params.componentType == "yAxis") {
							// alert(params.value)
							// var offsetX = params.event.offsetX + 10;
							// var offsetY = params.event.offsetY + 10;
							// myChart.dispatchAction({
							// 	type: 'showTip',
							// 	// seriesIndex: params.seriesIndex,
							// 	// dataIndex: params.dataIndex,
							// 	position: [offsetX, offsetY]
							// });

						} else {
							// alert(params.name)
							// var offsetX = params.event.offsetX + 10;
							// var offsetY = params.event.offsetY + 10;
							// myChart.dispatchAction({
							// 	type: 'showTip',
							// 	// seriesIndex: params.seriesIndex,
							// 	// dataIndex: params.dataIndex,
							// 	position: [offsetX, offsetY]
							// });
						}
					});
				}
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (myChart) {
					myChart.setOption(newValue)
					myChart.resize();
				}
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				// // console.log('onClick交互：', event, ownerInstance)
				// ownerInstance.callMethod('onViewClick', {
				// 	test: 'test'
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		// background-color: #FFFFFF;
		position: relative;
		// padding: 20rpx;
		padding-bottom: 20rpx;
		margin-bottom: 40rpx;

		.top-Section {
			padding: 0 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-family: Verdana;
			position: relative;
			margin-bottom: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #383838;
				display: block;
			}

			.leftBtn {
				display: flex;

				.btnName {
					font-size: 32rpx;
					font-weight: bold;
					color: #383838;
				}

				.btnIcon {
					color: #000000;
					margin-left: 10rpx;
					margin-top: 7rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.explainBtn {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;

				.explainImg {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.rightBtn {
				font-size: 24rpx;
				margin-top: 5rpx;
				display: flex;
				flex-direction: row;
				position: absolute;
				right: 20rpx;

				.btnName {
					color: #546074;
				}

				.btnIcon {
					color: #000000;
					margin-left: 10rpx;
					margin-top: 2rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.echarts {
			width: 100%;
			margin-top: 0;
		}

		.goMoreData {
			font-family: Verdana;
			color: #546074;
			font-size: 24rpx;
			text-align: center;
			margin-top: 30rpx;
		}

		.lineView {
			position: absolute;
			left: 26rpx;
			width: 4rpx;
			border-radius: 2rpx;
			top: 18rpx;
		}

		.clickDiv {
			width: 100%;
			height: 90%;
			// background-color: #4CD964;
			// opacity: 0.5;
			z-index: 100;
			top: 10%;
			left: 0;
			position: absolute;
			display: flex;
			flex-direction: column;

			.clickDiv-item {
				width: 100%;
				margin-left: 0;
				// background-color: #007AFF;
				// opacity: 0.5;
				margin-bottom: 5px;
			}
		}
		
		.toastDiv {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.toast {
				border-radius: 10rpx;
				background-color: rgba($color: #333, $alpha: 0.42);
				font-size: 28rpx;
				text-align: center;
				padding: 20rpx;
				max-width: 90%;
				line-height: 60rpx;
				color: #FFFFFF;
				font-family: Verdana;
			}
		}
	}
</style>