caimei-applets-caimei/pages/seller/club/components/echart-keyword.vue

<template>
	<view class="echart-content">
		<view class="echart-title">
			<view class="e-icon e3"><text class="iconfont icon-sousuoguanjianci"></text></view>
			<view class="e-name">搜索关键词</view>
		</view>
		<view class="echart-search">
			<view class="echart-search-text">
				<view class="search-text"
					>所有：<text>{{ keyWordData.totalKeywords }}条</text></view
				>
				<view class="search-text"
					>当前范围：<text>{{ keyWordData.keyWordsScopeNum }}条</text></view
				>
			</view>
			<view class="echart-search-date">
				<view class="echart-search-date-input">
					<picker
						mode="date"
						:value="date"
						:start="startDate"
						:end="endDate"
						@change="bindStartDateChange($event, 1)"
					>
						<text class="input-text">{{ keyWordData.startTime }}</text>
					</picker>
					<text class="iconfont icon-riqi"></text>
				</view>
				<view class="line">-</view>
				<view class="echart-search-date-input">
					<picker
						mode="date"
						:value="date"
						:start="startDate"
						:end="endDate"
						@change="bindEndDateChange($event, 1)"
					>
						<text class="input-text">{{ keyWordData.endTime }}</text>
					</picker>
					<text class="iconfont icon-riqi"></text>
				</view>
			</view>
			<view class="echart-search-time">
				<view
					class="time-tab"
					v-for="(time, index) in timeList"
					:class="{ current: current === index }"
					:key="index"
					@click="handleTimeClick(time.current, index, 1)"
					>{{ time.label }}</view
				>
			</view>
		</view>
		<view class="echart-mains">
			<view class="echart-mains-none" v-if="isEmpty">
				<image
					class="none-image"
					src="https://static.caimei365.com/app/img/bg/icon_echart_none@2x.png"
					mode=""
				></image>
				<view class="none-text">暂无数据</view>
			</view>
			<view class="echart-mains-data" v-else>
				<qiun-data-charts type="column" :opts="opts" :chartData="keyWordChartData" :animation="false" />
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import chartMixin from './mixins/chart.mixin.js'
export default {
	mixins: [chartMixin],
	props:{
		clubId:{
			type:Number,
			default:0
		}
	},
	data() {
		return {
			isEmpty:false,
			current: 0,
			keyWordChartData: null,
			keyWordData: {
				startTime: '',
				endTime: '',
				totalKeywords: 0,
				keyWordsScopeNum: 0
			},
			params:{
			    clubId:0,//  机构id
			    dateType:3,//   日期类别 0日 1月 2半年 3全年
			    startTime:'',//   开始时间
			    endTime:'',//   结束时间
			    type:0	//  统计类别 0订单 1搜索关键词 2咨询记录 3访问记录 4初始状态
			},
			opts: {
				legend: {
					show: false
				},
				color: ['#9370DB'],
				dataLabel: true,
				padding: [15, 30, 0, 5],
				enableScroll: false,
				xAxis: {
					disableGrid: true,
					min: 0,
					axisLine: false,
					max: 40,
					rotateLabel: true,
					format: 'xAxisDemo3'
				},
				yAxis: {
					fontSize: 12,
					fontColor: '#CCCCCC',
					axisLineColor: '#DCDCDC',
					gridColor: '#DCDCDC',
					boundaryGap: 'justify',
					disabled: true,
					axisLine: false,
					min: 0,
					max: 40
				},
				extra: {
					column: {
						type: 'group',
						width: 20,
						meterBorde: 1,
						meterFillColor: '#FFFFFF',
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						seriesGap: 2,
						categoryGap: 3,
						barBorderCircle: false,
						linearType: 'custom',
						linearOpacity: 1,
						customColor: ['#7B68EE', '#9370DB'],
						colorStop: 0
					}
				}
			}
		}
	},
	created() {
		this.params.clubId = this.clubId
		this.userClubPortrait(1)
	},
	methods: {
		handleTimeClick(dateType, index,type) {
			//年月日点击
			console.log('dateType', dateType)
			this.current = index
			this.params.dateType = dateType
			this.params.startTime = ''
			this.params.endTime = ''
			this.userClubPortrait(type)
		},
		async userClubPortrait(type){
			this.params.type = type
			this.keyWordData.startTime = this.params.startTime
			this.keyWordData.endTime = this.params.endTime
			try {
				const res = await this.UserService.userClubPortrait(this.params)
				const data = res.data
				console.log('data',data)
				this.keyWordData.totalKeywords = data.portrait.totalKeywords
				this.keyWordData.keyWordsScopeNum = data.portrait.keyWordsScopeNum
				this.keyWordData.startTime = this.params.startTime = data.portrait.startTime
				this.keyWordData.endTime = this.params.endTime = data.portrait.endTime
				if (data.behavior) {
					this.isEmpty = false
					this.getSetKeywordData(data.behavior)
				}else{
					this.isEmpty = true  
				}
				console.log('keyWordData', this.keyWordData)
			} catch (error) {
			   this.$util.msg(error.msg, 2000)
			}
		},
		getSetKeywordData(data) {
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: data.name,
					series: [
						{
							name: '',
							data: data.value
						}
					]
				}
				this.keyWordChartData = JSON.parse(JSON.stringify(res))
			}, 500)
		}
	},
	onShow() {}
}
</script>

<style lang="scss"></style>