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

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="top-Section">
			<view class="title">{{title}}</view>
			<view  class="rightBtn">
				<view style="display: flex;"   @click="exportAction" v-if="isShowExport" >
					<view class="btnName" style="margin-right: 2rpx;cursor: pointer;">导出</view>
					<image class="icon_export" src="../../static/icons/icon_export@2x.png" mode=""></image>
				</view>
				<view  style="display: flex;margin-left: 10rpx;"  @click="rightBtnAction" v-if="rightTitle.length > 0 && rightShowMore">
					<view class="btnName">
						{{rightTitle}}
					</view>
					<image v-if="rightShowMore" class="btnIcon" src="../../static/icons/icon_dropDown@2x.png" mode="aspectFit"></image>
				</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="toastDiv" v-show="isShowToast">
			<view class="toast">{{toastStr}}</view>
		</view>
		<view class="goMoreData" @click="getMoreDataAction" v-if="isShowMore">查看更多></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import echarts from '../../static/echarts.js'

	export default {
		props: {
			themeColor: null,
			fuzhuColor: null,
			themeColor50: null,
			themeColor25: null,
			fuzhuColor50: null,
			chartId: String,
			title: String,
			rightTitle: String,
			rightShowMore: {
				type: Boolean,
				default: true
			},
			isThemeColor: {
				type: Boolean,
				default: true
			},
			isShowExport: {
				type: Boolean,
				default: false
			},
			unit: {
				type: String,
				default: '%'
			},
			dataCount: {
				type: Number,
				default: 6
			},
			dataList: Array,
			yDataList: Array,
			isShowMore: {
				type: Boolean,
				default: false
			},
			emptyDesc: {
				type: String,
				default: "数据"
			}
		},
		data() {
			return {
				y2DataList: [],
				nameList: [],
				option: {
					// tooltip: {
					// 	// trigger: 'item',
					// 	// align: 'auto',
					// 	formatter: '{b}',
					// 	extraCssText: 'z-index:50'
					// },
					grid: {
						// left: '10%',
						// right: '5%',
						left: '36%',
						right: '20%',
						top: '0%',
						bottom: '0%',
						containLabel: false
					},
					xAxis: {
						type: 'value',
						show: false
					},
					yAxis: [{
							type: 'category',
							inverse: true,
							data: [],
							axisLabel: { //坐标轴刻度标签的相关设置。
								margin: 115,
								align: 'left',
								interval: 0,
								textStyle: {
									color: '#393939',
									fontFamily: 'Verdana',
									fontSize: 14,
									// lineHeight: 20,
								}

							},
							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)+"..."
				// 	// }

				// 	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')
			},
			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)
			},
			rightBtnAction() {
				this.$emit('chartRightBtnAction', this.chartId)
			},
			getMoreDataAction() {
				this.$emit('chartGetMoreDataAction', this.chartId)
			},
			exportAction(){
				this.$emit('exportAction',this.chartId)
			},
			showAllName(e) {
				// console.log('名字打印：', e)
				this.toastStr = e
				this.isShowToast = true
				var self = this
				var timer = setTimeout(function() {
					self.isShowToast = false
					clearTimeout(timer)
				}, 2000);
			}
		},
		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
			}
		}

	}
</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();
				}
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (myChart) {
					myChart.setOption(newValue)
					myChart.resize();
				}
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				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;
		// background-color: #4CD964;

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

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

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

				.btnName {
					color: #546074;
				}

				.btnIcon {
					color: #000000;
					margin-left: 10rpx;
					margin-top: 0rpx;
					width: 30rpx;
					height: 30rpx;
				}
				.icon_export{
					width: 28rpx;
					height: 25rpx;
					margin-top: 5rpx;
					margin-left: 6rpx;
				}
			}
		}

		.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>