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

<template>
	<view class="echart-content">
		<view class="echart-title">
			<view class="e-icon e2"><text class="iconfont icon-dingdan"></text></view> <view class="e-name">订单</view>
		</view>
		<view class="echart-search">
			<view class="echart-search-text">
				<view class="search-text">所有：<text>￥10000(10个)</text></view>
				<view class="search-text">当前范围：<text>￥10000(10个)</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">
						<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="pie" :opts="opts" :chartData="chartData" :errorShow="false" />
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import chartMixin from './mixins/chart.mixin.js'
export default {
	mixins: [chartMixin],
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			chartData: {},
			opts: {
				timing: 'easeOut',
				duration: 1000,
				rotate: false,
				rotateLock: false,
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc'
				],
				padding: [5, 5, 5, 5],
				fontSize: 13,
				fontColor: '#666666',
				dataLabel: true,
				dataPointShape: true,
				dataPointShapeType: 'solid',
				touchMoveLimit: 60,
				enableScroll: false,
				enableMarkLine: false,
				legend: {
					show: false,
					position: 'bottom',
					lineHeight: 25,
					float: 'bottom',
					padding: 5,
					margin: 5,
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: 'rgba(0,0,0,0)',
					borderWidth: 0,
					fontSize: 13,
					fontColor: '#666666',
					hiddenColor: '#CECECE',
					itemGap: 10
				},
				title: {
					name: '订单总量',
					fontSize: 15,
					color: '#666666',
					offsetX: 0,
					offsetY: 0
				},
				subtitle: {
					name: '70%',
					fontSize: 25,
					color: '#7cb5ec',
					offsetX: 0,
					offsetY: 0
				},
				extra: {
					ring: {
						ringWidth: 30,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: '#FFFFFF',
						centerColor: '#FFFFFF',
						customRadius: 0,
						linearType: 'none'
					},
					tooltip: {
						showBox: true,
						showArrow: true,
						showCategory: false,
						borderWidth: 0,
						borderRadius: 0,
						borderColor: '#000000',
						borderOpacity: 0.7,
						bgColor: '#000000',
						bgOpacity: 0.7,
						gridType: 'solid',
						dashLength: 4,
						gridColor: '#CCCCCC',
						boxPadding: 3,
						fontSize: 13,
						lineHeight: 20,
						fontColor: '#FFFFFF',
						legendShow: true,
						legendShape: 'auto',
						splitLine: true,
						horizentalLine: false,
						xAxisLabel: false,
						yAxisLabel: false,
						labelBgColor: '#FFFFFF',
						labelBgOpacity: 0.7,
						labelFontColor: '#666666'
					}
				}
			}
		}
	},
	created() {
		console.log('111111111')
		this.getServerData()
	},
	filters: {},
	
	methods: {
		getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [
						{
							format: 'pieDemo1',
							data: [
								{ name: '普通', value: 50, per: '63.5%' },
								{ name: '二手', value: 5, per: '0%' },
								{ name: '返佣', value: 5, per: '0%' },
								{ name: '部分退款', value: 2, per: '0%' },
								{ name: '全部退款', value: 4, per: '36.5%' },
								{ name: '已关闭', value: 60, per: '0%' }
							]
						}
					]
				}
				this.chartData = JSON.parse(JSON.stringify(res))
			}, 500)
		}
	},
	onShow() {}
}
</script>

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