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

<template>
	<view class="echart-content">
		<view class="echart-title">
			<view class="e-icon e5"><text class="iconfont icon-fangwenjilu"></text></view> <view class="e-name">访问记录</view>
		</view>
		<view class="echart-search">
			<view class="echart-search-date">
				<view class="echart-search-date-input">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
						<text class="input-text">{{ queryData.startAddTime }}</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">
						<text class="input-text">{{ queryData.endAddTime }}</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)"
					>{{ time.label }}</view
				>
			</view>
		</view>
		<view class="echart-mains">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :animation="false"/>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import chartMixin from './mixins/chart.mixin.js'
export default {
	mixins: [chartMixin],
	data() {
		return {
			chartData: {},
			opts: {
				legend:{
					show:false
				},
				color: ["#74b9ff"],
				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: ['#0984e3', '#74b9ff'],
						colorStop: 0
					}
				}
			}
		}
	},
	created() {
		this.getServerData()
	},
	computed: {},
	methods: {
		getServerData() {
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: [
						'美博会',
						'玻尿酸',
						'氨基酸',
						'Rossa阿萨科技的和',
						'啊啊咔咔卡时间段',
						'啊啊咔咔卡时间段',
						'啊啊咔咔卡时间段',
						'啊啊咔咔卡时间段',
						'啊啊咔咔卡时间段',
						'奥术大师..'
					],
					series: [
						{
							name: '',
							data: [50, 72, 100, 83, 63, 42, 42, 42, 42, 42]
						}
					]
				}
				this.chartData = JSON.parse(JSON.stringify(res))
			}, 500)
		}
	},
	onShow() {}
}
</script>

<style lang="scss">

</style>