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