Python + Vue 分析水果行情信息

夏天到了，什么季节的水果卖得最好？ 价格怎么样？ 产地都是哪儿的？

python + Vue 捣鼓捣鼓水果行情信息，并用可视化图形展示！
🤖git地址

数据获取：

# 准备好需要的包
import re
import json
import time
import requests

# 循环遍历分页内容
for page in range(1,10):
    try:
        # 目标
        url=f"https://www.guo68.com/market?page={page}"
        # action
        response=requests.get(url)

        print(response.text)
        # 获取标签里的内容
        a=re.findall('<li class="list1">(.*?)</li>',response.text)[1:]
        b=re.findall('<li class="list2 ellipsis">(.*?)</li>',response.text)
        c=re.findall('<li class="list3">(￥\d.*/斤)</li>',response.text)[1:]
        d=re.findall('<li class="list6">(.*?)</li>',response.text)[1:]

        print(a,b,c,d)
        # 对数据进行筛选，写入json文件
        for name,city,price,date in zip(a,b,c,d):
            print(name,city,price,date)
            if name=="其他":
                continue
            data={"name":name,"city":city,"price":price,"date":date}
            with open("fruit.json",'a',encoding="utf-8")as f:
                json.dump(data,f,ensure_ascii=False,indent=1)
        # 每次执行完等待时间
        time.sleep(3)
    except:
        continue

数据分析：

🤖git地址

// pages/home.vue
<template>
	<div class="box">
		<div class="headerbox">
			<h1>水果行情分析</h1>
		</div>
		<div class="mainbox">
			<div class="column">
				<div class="panel line">
					<div class="dflex_sb">
						<h3>日/月/年毛利额</h3>
						<div>
							<el-button size="mini" :class="{ active: daysBar == '日' }" @click="dayBar" round>日
							</el-button>
							<el-button size="mini" :class="{ active: daysBar == '月' }" @click="monthBar" round>月
							</el-button>
							<el-button size="mini" :class="{ active: daysBar == '年' }" @click="yearBar" round>年
							</el-button>
						</div>
					</div>
					<div id="create-bar" class="chart"></div>
				</div>
				<div class="panel line">
					<h3>春季销售Top5类水果</h3>
					<div id="create-spring-pie" class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie">
					<h3>夏季销售Top5类水果</h3>
					<div id="create-summer-pie" class="chart"></div>
					<div class="panel-footer"></div>
				</div>
			</div>
			<div class="column">
				<div class="no">
					<div class="no-hd">
						<ul>
							<li>{{ fruitStock }}</li>
							<li>{{ orderNum }}</li>
						</ul>
					</div>
					<div class="no-bd">
						<ul>
							<li>水果库存</li>
							<li>水果订单量</li>
						</ul>
					</div>
				</div>
				<div class="map">
					<div id="create-map" class="chart"></div>
					<div class="map1"></div>
					<div class="map2"></div>
					<div class="map3"></div>
				</div>
			</div>
			<div class="column">
				<div class="panel bar1">
					<div class="dflex_sb">
						<h3>日/月/年订单数</h3>
						<div>
							<el-button size="mini" :class="{ active: days == '日' }" @click="day" round>日</el-button>
							<el-button size="mini" :class="{ active: days == '月' }" @click="month" round>月</el-button>
							<el-button size="mini" :class="{ active: days == '年' }" @click="year" round>年</el-button>
						</div>
					</div>
					<div id="create-line-line" class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie1">
					<h3>秋季销售Top5类水果</h3>
					<div id="create-autumn-pie" class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie1">
					<h3>冬季销售Top5类水果</h3>
					<div id="create-winter-pie" class="chart"></div>
					<div class="panel-footer"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts';
	import china from 'echarts/map/json/china.json';
	import {
		area_format_user
	} from '@/common/china.js';

	const __name = 'usemall-goods';
	const __goodsCategory = 'usemall-goods-category';
	const __order = 'usemall-order';
	echarts.registerMap('china', china);
	export default {
		components: {

		},
		data() {
			return {
				start: 0,
				classOptions: [], // 水果分类信息
				fruitData: [], // 水果信息
				orderData: [], // 订单信息
				orderList: [], // 整理后的所有订单列表
				profitData: [], // 毛利信息
				profitList: [], // 整理后的所有毛利列表
				searchTime: [], // 搜索时间
				stateDatas: [], // 订单状态
				fruitStock: '', // 水果库存
				orderNum: '', // 水果订单量
				areaFormatUser: area_format_user, // 中国省市区信息
				req: {
					page: 0,
					rows: 0,
					orderby: 'sort asc',
					name: '',
					state: ''
				},
				reqOrder: {
					page: 1,
					rows: 0,
					orderby: 'sort asc',
					order_id: '',
					begin_time: '',
					end_time: '',
					state: ''
				},
				options: {
					useEasing: true, // 缓动动画 easing
					useGrouping: true, // 1,000,000 vs 1000000
					separator: ',', // 数字分隔符
					decimal: '.', // 小数分隔符
					prefix: '', // 前缀
					suffix: '' // 后缀
				},
				options_price: {
					useEasing: true, // 缓动动画 easing
					useGrouping: true, // 1,000,000 vs 1000000
					separator: ',', // 数字分隔符
					decimal: '.', // 小数分隔符
					prefix: '￥', // 前缀
					suffix: '' // 后缀
				},
				member_sta: {},
				order_sta: {},
				options_line_line: [],
				options_bar: [],
				options_spring_pie: [],
				options_summer_pie: [],
				options_autumn_pie: [],
				options_winter_pie: [],
				echart_line_line: null,
				echart_bar: null,
				days: '日',
				daysBar: '日',
				tableData_visit: [],
				tableData_sale: [],
				visit_state_search: '全部',
				sale_state_search: '全部'
			};
		},
		methods: {
			async getFruitCategoryInfo() {
				// 获取水果分类
				await this.$db[__goodsCategory].totree({
					orderby: 'sort asc',
					startWith: 'pid == ""',
					loadding: false
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						this.classOptions = res.datas;
					}
				});
			},
			async getFruitInfo() {
				// 获取水果信息
				await this.$db[__name]
					.whereif(this.req.state && this.req.state != '全部', {
						state: this.req.state
					})
					.whereif(this.req.name, {
						name: new RegExp(this.req.name)
					})
					.withgroup({
						field: 'state',
						obj: this.stateObj
					})
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							console.log(res)
							this.fruitData = res.datas.rows;
							this.fruitStock = res.datas.total;
							this.create_map(); // 水果产地分布
							this.create_pie(); // 水果分类饼状图

						}
					});
			},
			async getOrderInfo() {
				this.stateDatas = [];
				for (let key in this.stateOrderObj) {
					this.stateDatas.push({
						name: key,
						cnt: this.stateOrderObj[key]
					});
				}

				this.reqOrder.begin_time = '';
				this.reqOrder.end_time = '';

				if (this.searchTime && this.searchTime.length > 0) {
					this.reqOrder.begin_time = this.searchTime[0].getTime();
					this.reqOrder.end_time = this.searchTime[1].getTime() + (60 * 60 * 24 - 1) * 1000;
				}

				await this.$db[__order]
					.where({
						is_delete: 0
					})
					.whereif(this.reqOrder.state && this.reqOrder.state != '全部', {
						state: this.reqOrder.state
					})
					.whereif(this.reqOrder.order_id, {
						order_id: new RegExp(this.reqOrder.order_id)
					})
					.whereif(this.searchTime && this.searchTime.length > 0, {
						create_time: this.$db.$cmd.gte(this.reqOrder.begin_time).and(this.$db.$cmd.lte(this
							.reqOrder.end_time))
					})
					.withgroup({
						field: 'state',
						obj: this.stateOrderObj
					})
					.totable(this.reqOrder)
					.then(res => {
						if (res.code == 200) {
							if (res.datas.group && res.datas.group.datas) {
								this.stateDatas = res.datas.group.datas;
							}
							res.datas.rows.forEach((row, idx) => {
								row.imgs = [row.order_member_headimg];
								row.create_time = new Date(row.create_time).format();
							});
							this.orderData = res.datas.rows;
							this.orderNum = res.datas.total; 
							console.log(this.orderNum)
							this.profitData = res.datas.rows;
						}
					});

				let order_num = [];
				let order_list = [];
				let order_mlist = []; // 全部订单数

				let pay_num = [];
				let pay_order_list = [];
				let pay_order_mlist = []; // 支付数

				let cancel_num = [];
				let cancel_order_list = [];
				let cancel_order_mlist = []; // 取消数
				// console.log(this.orderData);
				// 从水果交易订单信息中提取需要的字段
				this.orderData.forEach((item) => {
					order_num.push({
						time: item.create_time.substring(0, 10),
						name: item.order_info, // 订单水果名称
						state: item.state, // 订单状态
						order_cnt: 1, // 初始化水果订单数
					});
					if (item.state === '已完成' || item.state === '待发货') {
						pay_num.push({
							time: item.create_time.substring(0, 10),
							state: item.state, // 订单状态
							pay_cnt: 1, // 初始化水果订单数
						});
					} else if (item.state === '已取消') {
						cancel_num.push({
							time: item.create_time.substring(0, 10),
							state: item.state, // 订单状态
							cancel_cnt: 1, // 初始化水果订单数
						});
					}
				});

				// 全部订单数
				let newOrderList = [...new Set(order_num.map(i => i.time))];
				let newOrderInfo = [...new Set(order_num.map(i => i.name))];
				newOrderList.forEach((i) => {
					order_list.push(order_num.filter(t => t.time === i));
				});
				order_list.forEach((item, index) => {
					order_mlist.push({
						time: newOrderList[index],
						name: newOrderInfo[index], // 订单水果名称
						order_cnt: item.length,
						pay_cnt: 0,
						cancel_cnt: 0
					});
				});

				// 支付数
				let newPayOrderList = [...new Set(pay_num.map(i => i.time))];
				newPayOrderList.forEach((i) => {
					pay_order_list.push(pay_num.filter(t => t.time === i));
				});
				pay_order_list.forEach((item, index) => {
					pay_order_mlist.push({
						time: newPayOrderList[index],
						pay_cnt: item.length
					});
				});

				// 取消数
				let newCancelOrderList = [...new Set(cancel_num.map(i => i.time))];
				newCancelOrderList.forEach((i) => {
					cancel_order_list.push(cancel_num.filter(t => t.time === i));
				});
				cancel_order_list.forEach((item, index) => {
					cancel_order_mlist.push({
						time: newCancelOrderList[index],
						cancel_cnt: item.length
					});
				});
				// 合并同一天的订单数、字符数、取消数
				order_mlist.forEach((item) => {
					pay_order_mlist.forEach((i) => {
						if (i.time === item.time) {
							item.pay_cnt = i.pay_cnt
						}
					});
					cancel_order_mlist.forEach((i) => {
						if (i.time === item.time) {
							item.cancel_cnt = i.cancel_cnt
						}
					});
				});

				this.orderList = order_mlist;
				// 日月年订单 折线图
				this.create_line_line(() => {
					this.day();
				});

				// 统计日月年毛利额
				this.profitData.forEach((item) => {
					if(item.order_total_money){
						this.profitList.push({
							time: item.create_time.substring(0, 10),
							profit: item.order_total_money
						})
					}
				});
				// 日月年毛利额 柱状图
				this.create_bar(() => {
					this.dayBar();
				});

				// 不同季节top5类水果销售情况
				this.seasons_fruit_sales();
			},
			// 绘制水果分类饼图
			create_pie() {
				const myChart = this.$echarts.init(document.getElementById('create-pie'));
				const state = {
					datas: [{
						state: '待审核',
						cnt: 0
					}, {
						state: '已下架',
						cnt: 0
					}, {
						state: '销售中',
						cnt: 0
					}]
				};
				const category = {
					datas: []
				};
				let new_category_date = [];

				let to_be_reviewed = []; // 待审核水果
				let to_be_reviewed_list = []; // 水果名称数组
				let to_be_reviewed_mlist = []; // 统计完后水果列表

				let lower_shelf = []; // 已下架水果
				let lower_shelf_list = []; // 水果名称数组
				let lower_shelf_mlist = []; // 统计完后水果列表

				let in_sale = []; // 销售中水果
				let in_sale_list = []; // 水果名称数组
				let in_sale_mlist = []; // 统计完后水果列表

				this.fruitData.forEach((item) => {
					for (let i = 0; i < this.classOptions.length; i++) {
						// 统计 水果不同状态数量
						if (item.name_pw === this.classOptions[i].name) {
							if (state.datas[0].state === item.state) {
								// 统计 待审核 水果数
								state.datas[0].cnt++;
							} else if (state.datas[1].state === item.state) {
								// 统计 已下架 水果数
								state.datas[1].cnt++;
								// count ++;
							} else if (state.datas[2].state === item.state) {
								// 统计 销售中 水果数
								state.datas[2].cnt++;
							}
						}
						// 统计某一类水果在 不同状态下的数量
						if (item.name_pw === this.classOptions[i].name && item.state === '待审核') {
							to_be_reviewed.push({
								name: item.name_pw,
								state: item.state,
								cnt: 1
							});
						} else if (item.name_pw === this.classOptions[i].name && item.state === '已下架') {
							lower_shelf.push({
								name: item.name_pw,
								state: item.state,
								cnt: 1
							});
						} else if (item.name_pw === this.classOptions[i].name && item.state === '销售中') {
							in_sale.push({
								name: item.name_pw,
								state: item.state,
								cnt: 1
							});
						}
					}
				});
				// 统计同商品同类型出现了多少次
				let newReviewedNameArr = [...new Set(to_be_reviewed.map(i => i.name))];
				newReviewedNameArr.forEach((i) => {
					to_be_reviewed_list.push(to_be_reviewed.filter(t => t.name === i));
				});
				to_be_reviewed_list.forEach((item, index) => {
					to_be_reviewed_mlist.push({
						name: newReviewedNameArr[index],
						state: '待审核',
						cnt: item.length
					})
				});
				let newLowerShelfNameArr = [...new Set(lower_shelf.map(i => i.name))];
				newLowerShelfNameArr.forEach((i) => {
					lower_shelf_list.push(lower_shelf.filter(t => t.name === i));
				});
				lower_shelf_list.forEach((item, index) => {
					lower_shelf_mlist.push({
						name: newLowerShelfNameArr[index],
						state: '已下架',
						cnt: item.length
					})
				});
				let newinSaleNameArr = [...new Set(in_sale.map(i => i.name))];
				newinSaleNameArr.forEach((i) => {
					in_sale_list.push(in_sale.filter(t => t.name === i));
				});
				in_sale_list.forEach((item, index) => {
					in_sale_mlist.push({
						name: newinSaleNameArr[index],
						state: '销售中',
						cnt: item.length
					})
				});
				// 合并各类统计数据
				category.datas = [...in_sale_mlist, ...lower_shelf_mlist, ...to_be_reviewed_mlist]
				let echartData = {
					inner: [],
					outer: []
				};
				echartData.inner = [];
				echartData.outer = [];
				state.datas.forEach(_ => {
					echartData.inner.push({
						value: _.cnt,
						name: _.state
					});
				});
				category.datas.forEach(_ => {
					echartData.outer.push({
						value: _.cnt,
						name: _.name
					});
				});

				const option = {
					backgroundColor: '',
					color: [
						'#2ec7c9',
						'#b6a2de',
						'#5ab1ef',
						'#ffb980',
						'#d87a80',
						'#8d98b3',
						'#FFEA01',
						'#B8D07C',
						'#fca4bb',
						'#dc69aa',
						'#07a2a4',
						'#9a7fd1',
						'#588dd5',
						'#f5994e',
						'#c05050',
						'#59678c',
						'#c9ab00',
						'#7eb00a',
						'#6f5553',
						'#c14089'
					],
					tooltip: {
						trigger: 'item',
						formatter: '{a} \n{b}: {c} ({d}%)'
					},
					series: [{
							name: '水果状态',
							type: 'pie',
							radius: [0, '35%'],
							itemStyle: {
								normal: {
									borderColor: '#fff',
									borderWidth: 2
								}
							},
							label: {
								normal: {
									position: 'inner'
								}
							},
							labelLine: {
								normal: {
									show: false
								}
							},
							data: echartData.inner
						},
						{
							name: '水果分类',
							type: 'pie',
							radius: ['45%', '55%'],
							data: echartData.outer,
							labelLine: {
								normal: {
									length: 20,
									length2: 140,
									lineStyle: {
										color: '#e6e6e6'
									}
								}
							},
							label: {
								normal: {
									formatter: params => {
										return '{icon|●}{name|' + params.name + '}{percent|' + params.percent
											.toFixed(1) + '%}{value|' + params.value + '}';
									},
									padding: [0, -130, 25, -130],
									rich: {
										color: '#333',
										icon: {
											fontSize: 16
										},
										name: {
											fontSize: 14,
											padding: [0, 5, 0, 5],
											color: '#666666'
										},
										percent: {
											color: '#333',
											padding: [0, 5, 0, 0]
										},
										value: {
											fontSize: 16,
											fontWeight: 'bold',
											color: '#333333'
										}
									}
								}
							}
						}
					]
				};

				myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize();
				});
			},
			// 绘制水果产地分布地图
			create_map() {
				const myChart = this.$echarts.init(document.getElementById('create-map'));
				let areaFormatList = []; // 水果包含城市集
				// 统计查询出来的城市名
				let area_format_list = [];
				let area_format_mlist = [];
				// console.log(this.areaFormatUser); // 中国省市区数据
				// 遍历查询同场地的水果数量
				this.fruitData.forEach((item) => {
					for (let j = 0; j < this.areaFormatUser.length; j++) {
						if (item.city === this.areaFormatUser[j].ext_name) {
							// console.log(item)
						} else {
							for (let i = 0; i < this.areaFormatUser[j].childs.length; i++) {
								if (item.city === this.areaFormatUser[j].childs[i].ext_name) {
									// console.log(item)
									areaFormatList.push({
										city: this.areaFormatUser[j].ext_name,
										cnt: 1
									})
								}
							}
						}
					}
				});
				// 统计同地区的商品数
				let newList = [...new Set(areaFormatList.map(i => i.city))];
				newList.forEach((i) => {
					area_format_list.push(areaFormatList.filter(t => t.city === i));
				});
				area_format_list.forEach((item, index) => {
					area_format_mlist.push({
						name: newList[index],
						value: item.length
					})
				});
				const option = {
					background: '',
					tooltip: {
						show: true,
						formatter: function(e) {
							return 0 == e.value ? e.name + '：暂未在该地区进货水果' : e.seriesName + '\n' + e.name + '：' + e
								.value;
						}
					},
					visualMap: {
						min: 0,
						max: 1000,
						left: 10,
						bottom: 40,
						showLabel: !0,
						text: ['高', '低'],
						pieces: [{
								gt: 100,
								label: '> 100',
								color: '#7f1100'
							},
							{
								gte: 10,
								lte: 100,
								label: '10 - 100',
								color: '#ff5428'
							},
							{
								gte: 1,
								lt: 10,
								label: '1 - 9',
								color: '#ff8c71'
							},
							{
								gt: 0,
								lt: 1,
								label: '0 - 1',
								color: '#ffd768'
							},
							{
								value: 0,
								color: '#ffffff'
							}
						],
						show: false
					},
					geo: {
						map: 'china',
						roam: true,
						scaleLimit: {
							min: 1,
							max: 2
						},
						zoom: 1,
						top: 60,
						label: {
							normal: {
								show: !0,
								fontSize: '14',
								color: '#fff'
							}
						},
						itemStyle: {
							normal: {
							    areaColor: "rgba(43, 196, 243, 0.42)",
							    borderColor: "rgba(43, 196, 243, 1)",
								borderWidth: 1
							},
							emphasis: {
								areaColor: "#2B91B7"
							}
						}
					},
					series: [{
						name: '水果产地',
						type: 'map',
						geoIndex: 0,
						data: area_format_mlist
					}]
				};

				myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize();
				});
			},
			// 绘制水果订单折线图
			create_line_line(callback) {
				let _this = this;
				this.echart_line_line = this.$echarts.init(document.getElementById('create-line-line'));
				//对话框图片
				var uploadedDataURL = '/asset/get/s/data-1547533200844-7eBMgp66l.png';
				this.options_line_line = {
					grid: {
						top: "20%",
						left: "3%",
						right: "4%",
						bottom: "3%",
						show: true,
						borderColor: "#012f4a",
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						label: {
							show: true
						},
						formatter: function(params) {
							let str = '';

							str += params[0].data.name + '\n';
							params.forEach(item => {
								if (item.seriesName === '订单数') {
									str += item.seriesName + ' : ' + item.data.value + '' + '\n';
								} else if (item.seriesName === '支付数') {
									str += item.seriesName + ' : ' + item.data.value + '' + '\n';
								} else if (item.seriesName === '取消数') {
									str += item.seriesName + ' : ' + item.data.value + '' + '\n';
								}
							});
							return str;
						}
					},
					legend: {
						data: ['订单数', '支付数', '取消数'],
						top: '0%',
						// 修饰图例文字的颜色
						textStyle: {
							color: "#fff"
						}
					},
					xAxis: {
						type: "category",
						boundaryGap: false, //默认，坐标轴留白策略
						// 去除刻度
						axisTick: {
							show: false
						},
						// 修饰刻度标签的颜色
						axisLabel: {
							color: "rgba(255,255,255,.7)"
						},
						// 去除x坐标轴的颜色
						axisLine: {
							show: false
						},
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					},
					yAxis: {
						type: "value",
						// 去除刻度
						axisTick: {
							show: false
						},
						// 修饰刻度标签的颜色
						axisLabel: {
							color: "rgba(255,255,255,.7)"
						},
						// 修改y轴分割线的颜色
						splitLine: {
							lineStyle: {
								color: "#012f4a"
							}
						}
					},
					series: [{
							smooth: true, //是否平滑曲线显示
							name: '取消数',
							type: 'line',
							symbol: 'circle',
							symbolSize: 7,
							lineStyle: {
								color: '#FFB980',
								shadowBlur: 12,
								shadowColor: '#FFB980',
								shadowOffsetX: 1,
								shadowOffsetY: 1
							},
							itemStyle: {
								color: '#FFB980',
								borderWidth: 1,
								borderColor: '#FFB980'
							},
							data: [600, 1000, 800, 1300, 1250, 1400, 1500, 1400, 1250, 1400, 1500, 2000]
						},
						{
							smooth: true, //是否平滑曲线显示
							name: '订单数',
							type: 'line',
							symbol: 'circle',
							symbolSize: 7,
							lineStyle: {
								color: '#fd6b6c',
								shadowBlur: 12,
								shadowColor: '#fd6b6c',
								shadowOffsetX: 1,
								shadowOffsetY: 1
							},
							itemStyle: {
								color: '#fd6b6c',
								borderWidth: 1,
								borderColor: '#fd6b6c'
							},
							data: [600, 1000, 800, 1300, 1250, 1400, 1500, 1400, 1250, 1400, 1500, 2000]
						},
						{
							smooth: true, //是否平滑曲线显示
							name: '支付数',
							type: 'line',
							symbol: 'circle',
							symbolSize: 7,
							lineStyle: {
								color: '#00aaff',
								shadowBlur: 12,
								shadowColor: '#00aaff',
								shadowOffsetX: 1,
								shadowOffsetY: 1
							},
							itemStyle: {
								color: '#00aaff',
								borderWidth: 1,
								borderColor: '#00aaff'
							},
							data: [600, 1000, 800, 1300, 1250, 1400, 1500, 1400, 1250, 1400, 1500, 2000]
						}
					]
				};

				window.addEventListener('resize', () => {
					_this.echart_line_line.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			},
			// 绘制水果订单毛利柱状图
			create_bar(callback) {
				let _this = this;
				this.echart_bar = this.$echarts.init(document.getElementById('create-bar'));

				//对话框图片
				var uploadedDataURL = '/asset/get/s/data-1547533200844-7eBMgp66l.png';
				this.options_bar = {
					color: ["#2f89cf"],
					grid: {
						left: "0%",
						top: "10px",
						right: "0%",
						bottom: "4%",
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						label: {
							show: true
						},
						formatter: function(params) {
							let str = '';

							str += params[0].data.name + '\n';
							params.forEach(item => {
								if (item.seriesName === '毛利额') {
									str += item.seriesName + ' : ' + item.data.value + '' + '\n';
								}
							});
							return str;
						}
					},
					legend: {
						data: ['毛利额'],
						top: '0%',
						textStyle: {
							color: '#fff'
						}
					},
					xAxis: {
						type: "category",
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: true,
							// alignWithLabel: true
						},
						axisLabel: {
							textStyle: {
								color: "rgba(255,255,255,.6)",
								fontSize: "12"
							}
						},
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					},
					yAxis: {
						type: "value",
						axisLabel: {
							textStyle: {
								color: "rgba(255,255,255,.6)",
								fontSize: "12"
							}
						},
						axisLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)"
								// width: 1,
								// type: "solid"
							}
						},
						splitLine: {
							lineStyle: {
								color: "rgba(255,255,255,.1)"
							}
						}
					},
					series: [{
						smooth: true, //是否平滑曲线显示
						name: '毛利额',
						type: 'bar',
						symbol: 'circle',
						symbolSize: 7,
						itemStyle: {
							barBorderRadius: 5
						},
						data: [600, 1000, 800, 1300, 1250, 1400, 1500, 1400, 1250, 1400, 1500, 2000]
					}]
				};
				window.addEventListener('resize', () => {
					_this.echart_bar.resize();
				});
				if (typeof callback === 'function') {
					callback();
				}
			},
			// 绘制不同季节top5类水果销售情况 南丁格尔玫瑰图
			seasons_fruit_sales() {
				let _this = this;
				const springChart = this.$echarts.init(document.getElementById('create-spring-pie'));
				const summerChart = this.$echarts.init(document.getElementById('create-summer-pie'));
				const autumnChart = this.$echarts.init(document.getElementById('create-autumn-pie'));
				const winterChart = this.$echarts.init(document.getElementById('create-winter-pie'));
				let springData = []; // 春季订单
				let summerData = []; // 夏季订单
				let autumnData = []; // 秋季订单
				let winterData = []; // 冬季订单
				this.orderList.forEach((item) => {
					// 三个月期间，相同名称水果的订单数最多的
					var d = new Date(item.time);
					var month = parseInt(d.getMonth()) + 1;
					var year = d.getFullYear();
					var quarter = this.getQuarterStartMonth(month);
					if (item.name && quarter != 0) {
						// 取季度第一天
						var fristDay = new Date(year, quarter, 1);
						// 获取季度最后一天
						var lastDay = new Date(year, quarter + 2, 0);
						var beginWhereTheTime = year + "-" + this.formatDate(quarter) + "-" + this.formatDate(
							fristDay.getDate());
						var endWhereTheTime = year + "-" + this.formatDate(quarter + 2) + "-" + this.formatDate(
							lastDay.getDate());
						// 开始按季节分类
						if (item.time > '2021-01-01' && item.time < '2021-03-31') {
							// console.log('春季')
							this.classOptions.forEach((i) => {
								if (i.name === item.name) {
									springData.push(item)
								}
							});
						} else if (item.time > '2021-04-01' && item.time < '2021-06-31') {
							// console.log('夏季')
							this.classOptions.forEach((i) => {
								if (i.name === item.name) {
									summerData.push(item)
								}
							});
						} else if (item.time > '2021-07-01' && item.time < '2021-09-31') {
							// console.log('秋季')
							this.classOptions.forEach((i) => {
								if (i.name === item.name) {
									autumnData.push(item)
								}
							});
						} else if (item.time > '2021-10-01' && item.time < '2021-12-31') {
							// console.log('冬季')
							// 冬季同类水果的数据
							this.classOptions.forEach((i) => {
								if (i.name === item.name) {
									winterData.push(item)
								}
							});
						}
					}
				});
				// 根据水果分类名称统计订单数
				let sptingOrderData = springData.reduce((obj, item) => {
					let find = obj.find(i => i.name === item.name);
					let count = {
						...item,
						frequency: 1
					};
					find ? (find.order_cnt += item.order_cnt, find.frequency++) : obj.push(count);
					return obj
				}, []);
				let summerOrderData = summerData.reduce((obj, item) => {
					let find = obj.find(i => i.name === item.name);
					let count = {
						...item,
						frequency: 1
					};
					find ? (find.order_cnt += item.order_cnt, find.frequency++) : obj.push(count);
					return obj
				}, []);
				let autumnOrderData = autumnData.reduce((obj, item) => {
					let find = obj.find(i => i.name === item.name);
					let count = {
						...item,
						frequency: 1
					};
					find ? (find.order_cnt += item.order_cnt, find.frequency++) : obj.push(count);
					return obj
				}, []);
				let winterOrderData = winterData.reduce((obj, item) => {
					let find = obj.find(i => i.name === item.name);
					let count = {
						...item,
						frequency: 1
					};
					find ? (find.order_cnt += item.order_cnt, find.frequency++) : obj.push(count);
					return obj
				}, []);
				// 对订单数进行排序,统计销售top5的水果种类
				sptingOrderData.sort((a, b) => {
					return b.order_cnt - a.order_cnt
				});
				summerOrderData.sort((a, b) => {
					return b.order_cnt - a.order_cnt
				});
				autumnOrderData.sort((a, b) => {
					return b.order_cnt - a.order_cnt
				});
				winterOrderData.sort((a, b) => {
					return b.order_cnt - a.order_cnt
				});
				// 整理成echats需要的字段
				let spring = sptingOrderData.map((item) => {
					return {
						name: item.name,
						value: item.order_cnt
					}
				});
				let summer = summerOrderData.map((item) => {
					return {
						name: item.name,
						value: item.order_cnt
					}
				});
				let autumn = autumnOrderData.map((item) => {
					return {
						name: item.name,
						value: item.order_cnt
					}
				});
				let winter = winterOrderData.map((item) => {
					return {
						name: item.name,
						value: item.order_cnt
					}
				});
				// 春季
				const options_spring_pie = {
					legend: {
						top: "90%",
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: "rgba(255,255,255,.5)",
							fontSize: "12"
						}
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					// 注意颜色写的位置
					color: [
						"#55aaff",
						"#60cda0",
						"#ed8884",
						"#ff9f7f",
						"#0096ff",
						"#9fe6b8",
						"#32c5e9",
						"#1d9dff"
					],
					series: [{
						name: "点位统计",
						type: "pie",
						// 如果radius是百分比则必须加引号
						radius: ["10%", "70%"],
						center: ["50%", "42%"],
						roseType: "radius",
						data: spring,
						// 修饰饼形图文字相关的样式 label对象
						label: {
							fontSize: 10
						},
						// 修饰引导线样式
						labelLine: {
							// 连接到图形的线长度
							length: 10,
							// 连接到文字的线长度
							length2: 10
						}
					}]
				};
				// 夏季
				const options_summer_pie = {
					legend: {
						top: "90%",
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: "rgba(255,255,255,.5)",
							fontSize: "12"
						}
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					// 注意颜色写的位置
					color: [
						"#55aaff",
						"#60cda0",
						"#ed8884",
						"#ff9f7f",
						"#0096ff",
						"#9fe6b8",
						"#32c5e9",
						"#1d9dff"
					],
					series: [{
						name: "点位统计",
						type: "pie",
						// 如果radius是百分比则必须加引号
						radius: ["10%", "70%"],
						center: ["50%", "42%"],
						roseType: "radius",
						data: summer,
						// 修饰饼形图文字相关的样式 label对象
						label: {
							fontSize: 10
						},
						// 修饰引导线样式
						labelLine: {
							// 连接到图形的线长度
							length: 10,
							// 连接到文字的线长度
							length2: 10
						}
					}]
				};
				// 秋季
				const options_autumn_pie = {
					legend: {
						top: "90%",
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: "rgba(255,255,255,.5)",
							fontSize: "12"
						}
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					// 注意颜色写的位置
					color: [
						"#55aaff",
						"#60cda0",
						"#ed8884",
						"#ff9f7f",
						"#0096ff",
						"#9fe6b8",
						"#32c5e9",
						"#1d9dff"
					],
					series: [{
						name: "点位统计",
						type: "pie",
						// 如果radius是百分比则必须加引号
						radius: ["10%", "70%"],
						center: ["50%", "42%"],
						roseType: "radius",
						data: autumn,
						// 修饰饼形图文字相关的样式 label对象
						label: {
							fontSize: 10
						},
						// 修饰引导线样式
						labelLine: {
							// 连接到图形的线长度
							length: 10,
							// 连接到文字的线长度
							length2: 10
						}
					}]
				};
				// 冬季
				const options_winter_pie = {
					legend: {
						top: "90%",
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: "rgba(255,255,255,.5)",
							fontSize: "12"
						}
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					// 注意颜色写的位置
					color: [
						"#55aaff",
						"#60cda0",
						"#ed8884",
						"#ff9f7f",
						"#0096ff",
						"#9fe6b8",
						"#32c5e9",
						"#1d9dff"
					],
					series: [{
						name: "点位统计",
						type: "pie",
						// 如果radius是百分比则必须加引号
						radius: ["10%", "70%"],
						center: ["50%", "42%"],
						roseType: "radius",
						data: winter,
						// 修饰饼形图文字相关的样式 label对象
						label: {
							fontSize: 10
						},
						// 修饰引导线样式
						labelLine: {
							// 连接到图形的线长度
							length: 10,
							// 连接到文字的线长度
							length2: 10
						}
					}]
				};
				// 春季
				springChart.setOption(options_spring_pie);
				window.addEventListener('resize', function() {
					springChart.resize();
				});
				// 夏季
				summerChart.setOption(options_summer_pie);
				window.addEventListener('resize', function() {
					summerChart.resize();
				})
				// 秋季
				autumnChart.setOption(options_autumn_pie);
				window.addEventListener('resize', function() {
					autumnChart.resize();
				});
				// 冬季
				winterChart.setOption(options_winter_pie);
				window.addEventListener('resize', function() {
					winterChart.resize();
				});
			},

			//格式化月和日为MM、dd
			formatDate(value) {
				if (value < 10) {
					value = "0" + value;
				}
				return value;
			},
			//获取当前月所在季度的开始月
			getQuarterStartMonth(month) {
				var quarterStartMonth = 0;
				if (month < 4) {
					quarterStartMonth = 1;
				}
				if (3 < month && month < 7) {
					quarterStartMonth = 4;
				}
				if (6 < month && month < 10) {
					quarterStartMonth = 7;
				}
				if (month > 9) {
					quarterStartMonth = 10;
				}
				return quarterStartMonth;
			},
			day() {
				this.days = '日';
				this.options_line_line.xAxis.data = [];
				this.options_line_line.series[0].data = []; // 取消数
				this.options_line_line.series[1].data = []; // 订单数
				this.options_line_line.series[2].data = []; // 支付数
				let today = new Date();
				// 近一个月订单数
				for (let i = 30; i > -1; i--) {
					today = new Date();
					today.setTime(today.getTime() - 1000 * 60 * 60 * 24 * i);
					this.options_line_line.series[0].data.push({
						value: 0,
						name: today.format('yyyy年MM月dd日')
					});
					this.options_line_line.series[1].data.push({
						value: 0,
						name: today.format('yyyy年MM月dd日')
					});
					this.options_line_line.series[2].data.push({
						value: 0,
						name: today.format('yyyy年MM月dd日')
					});
					this.options_line_line.xAxis.data.push({
						value: today.format('dd'),
						time: today.format('yyyy-MM-dd')
					});
				}
				this.options_line_line.xAxis.data.forEach((x, i) => {
					let data = this.orderList.find(d => d.time.split(' ')[0] == x.time);
					if (data) {
						this.options_line_line.series[0].data[i].value = data.cancel_cnt;
						this.options_line_line.series[1].data[i].value = data.order_cnt;
						this.options_line_line.series[2].data[i].value = data.pay_cnt;
					}
				});
				this.echart_line_line.setOption(this.options_line_line);
			},
			month() {
				this.days = '月';
				let monthData = [];
				let monthOrderData = []; // 每月订单数
				let monthPayData = []; // 每月支付数
				let monthCancelData = []; // 每月取消数
				// 按月统计订单数、支付数、取消数
				this.orderList.forEach((item) => {
					if (item.order_cnt) {
						monthOrderData.push({
							month: item.time.substring(0, 7),
							order_cnt: item.order_cnt,
						});
					}
					if (item.pay_cnt) {
						monthPayData.push({
							month: item.time.substring(0, 7),
							pay_cnt: item.pay_cnt,
						});
					}
					if (item.cancel_cnt) {
						monthCancelData.push({
							month: item.time.substring(0, 7),
							cancel_cnt: item.cancel_cnt,
						});
					}
				});
				// 统计每个月的订单数
				monthOrderData = monthOrderData.reduce((obj, item) => {
					let find = obj.find(i => i.month === item.month);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.order_cnt += item.order_cnt, find.frequency++) : obj.push(d);
					return obj
				}, []);
				// 统计每个月的支付数
				monthPayData = monthPayData.reduce((obj, item) => {
					let find = obj.find(i => i.month === item.month);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.pay_cnt += item.pay_cnt, find.frequency++) : obj.push(d);
					return obj
				}, []);
				// 统计每个月的取消数
				monthCancelData = monthCancelData.reduce((obj, item) => {
					let find = obj.find(i => i.month === item.month);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.cancel_cnt += item.cancel_cnt, find.frequency++) : obj.push(d);
					return obj
				}, []);
				// 合并同月的订单数、字符数、取消数
				monthOrderData.forEach((item) => {
					monthPayData.forEach((i) => {
						if (i.month === item.month) {
							item.pay_cnt = i.pay_cnt
						} else {
							item.pay_cnt = 0
						}
					});
					monthCancelData.forEach((i) => {
						if (i.month === item.month) {
							item.cancel_cnt = i.cancel_cnt
						} else {
							item.cancel_cnt = 0
						}
					});
				});
				this.options_line_line.xAxis.data = [];
				this.options_line_line.series[0].data = []; // 取消数
				this.options_line_line.series[1].data = []; // 订单数
				this.options_line_line.series[2].data = []; // 支付数
				let today = new Date();
				for (let i = 12; i > -1; i--) {
					today = new Date();
					today.setMonth(today.getMonth() - i);
					this.options_line_line.series[0].data.push({
						value: 0,
						name: today.format('yyyy年MM月')
					});
					this.options_line_line.series[1].data.push({
						value: 0,
						name: today.format('yyyy年MM月')
					});
					this.options_line_line.series[2].data.push({
						value: 0,
						name: today.format('yyyy年MM月')
					});
					this.options_line_line.xAxis.data.push({
						value: today.format('yyyy-MM'),
						month: today.format('yyyy-MM')
					});
				}
				this.options_line_line.xAxis.data.forEach((x, i) => {
					let data = monthOrderData.find(d => d.month.split(' ')[0] == x.month);
					if (data) {
						this.options_line_line.series[0].data[i].value = data.cancel_cnt;
						this.options_line_line.series[1].data[i].value = data.order_cnt;
						this.options_line_line.series[2].data[i].value = data.pay_cnt;
					}
				});
				this.echart_line_line.setOption(this.options_line_line);
			},
			year() {
				this.days = '年';
				let yearData = [];
				let yearOrderData = []; // 每年订单数
				let yearPayData = []; // 每年支付数
				let yearCancelData = []; // 每年取消数
				// 按年统计订单数、支付数、取消数
				this.orderList.forEach((item) => {
					if (item.order_cnt) {
						yearOrderData.push({
							year: item.time.substring(0, 4),
							order_cnt: item.order_cnt,
						});
					}
					if (item.pay_cnt) {
						yearPayData.push({
							year: item.time.substring(0, 4),
							pay_cnt: item.pay_cnt,
						});
					}
					if (item.cancel_cnt) {
						yearCancelData.push({
							year: item.time.substring(0, 4),
							cancel_cnt: item.cancel_cnt,
						});
					}
				});

				// 统计每年的订单数
				yearOrderData = yearOrderData.reduce((obj, item) => {
					let find = obj.find(i => i.year === item.year);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.order_cnt += item.order_cnt, find.frequency++) : obj.push(d);
					return obj
				}, []);
				// 统计每年的支付数
				yearPayData = yearPayData.reduce((obj, item) => {
					let find = obj.find(i => i.year === item.year);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.pay_cnt += item.pay_cnt, find.frequency++) : obj.push(d);
					return obj
				}, []);
				// 统计每年的取消数
				yearCancelData = yearCancelData.reduce((obj, item) => {
					let find = obj.find(i => i.year === item.year);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.cancel_cnt += item.cancel_cnt, find.frequency++) : obj.push(d);
					return obj
				}, []);
				// 合并同年的订单数、字符数、取消数
				yearOrderData.forEach((item) => {
					yearPayData.forEach((i) => {
						if (i.year === item.year) {
							item.pay_cnt = i.pay_cnt
						} else {
							item.pay_cnt = 0
						}
					});
					yearCancelData.forEach((i) => {
						if (i.year === item.year) {
							item.cancel_cnt = i.cancel_cnt
						} else {
							item.cancel_cnt = 0
						}
					});
				});
				this.options_line_line.xAxis.data = [];
				this.options_line_line.series[0].data = []; // 取消数
				this.options_line_line.series[1].data = []; // 订单数
				this.options_line_line.series[2].data = []; // 支付数

				//获取系统当前时间
				let curDate = (new Date()).getTime();
				for (let i = 3; i > -2; i--) {
					curDate = (new Date()).getTime();
					// 将4年的时间单位换算成毫秒
					let fourYearsTime = (365 * i + 366) * 24 * 60 * 60 * 1000;
					//用当前时间-4年时间，得到4年前当前时间
					let result = curDate - fourYearsTime;
					let resultDate = new Date(result);
					this.options_line_line.series[0].data.push({
						value: 0,
						name: resultDate.format('yyyy年')
					});
					this.options_line_line.series[1].data.push({
						value: 0,
						name: resultDate.format('yyyy年')
					});
					this.options_line_line.series[2].data.push({
						value: 0,
						name: resultDate.format('yyyy年')
					});
					this.options_line_line.xAxis.data.push({
						value: resultDate.format('yyyy'),
						year: resultDate.format('yyyy')
					});
				}
				this.options_line_line.xAxis.data.forEach((x, i) => {
					let data = yearOrderData.find(d => d.year.split(' ')[0] == x.year);
					if (data) {
						this.options_line_line.series[0].data[i].value = data.cancel_cnt;
						this.options_line_line.series[1].data[i].value = data.order_cnt;
						this.options_line_line.series[2].data[i].value = data.pay_cnt;
					}
				});
				this.echart_line_line.setOption(this.options_line_line);
			},
			dayBar() {
				this.daysBar = '日';
				// 统计每日销售总毛利
				let dayProfitData = this.profitList.reduce((obj, item) => {
					let find = obj.find(i => i.time === item.time);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.profit += item.profit, find.frequency++) : obj.push(d);
					return obj
				}, []);
				this.options_bar.xAxis.data = [];
				this.options_bar.series[0].data = []; // 每日毛利额
				let today = new Date();
				// 近一个月订单数
				for (let i = 30; i > -1; i--) {
					today = new Date();
					today.setTime(today.getTime() - 1000 * 60 * 60 * 24 * i);
					this.options_bar.series[0].data.push({
						value: 0,
						name: today.format('yyyy年MM月dd日')
					});
					this.options_bar.xAxis.data.push({
						value: today.format('dd'),
						time: today.format('yyyy-MM-dd')
					});
				}
				this.options_bar.xAxis.data.forEach((x, i) => {
					let data = dayProfitData.find(d => d.time.split(' ')[0] == x.time);
					if (data) {
						this.options_bar.series[0].data[i].value = (data.profit / 100).toFixed(2);
					}
				});
				this.echart_bar.setOption(this.options_bar);
			},
			monthBar() {
				this.daysBar = '月';
				let monthProfitData = []; // 每月毛利额
				// 按月统计毛利额
				this.profitList.forEach((item) => {
					if (item.profit) {
						monthProfitData.push({
							month: item.time.substring(0, 7),
							profit: item.profit,
						});
					}
				});
				// 统计每个月的订单数
				monthProfitData = monthProfitData.reduce((obj, item) => {
					let find = obj.find(i => i.month === item.month);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.profit = (parseFloat(find.profit) + parseFloat(item.profit)).toFixed(2), find
						.frequency++) : obj.push(d);
					return obj
				}, []);
				this.options_bar.xAxis.data = [];
				this.options_bar.series[0].data = []; // 毛利额
				let today = new Date();
				for (let i = 12; i > -1; i--) {
					today = new Date();
					today.setMonth(today.getMonth() - i);
					this.options_bar.series[0].data.push({
						value: 0,
						name: today.format('yyyy年MM月')
					});
					this.options_bar.xAxis.data.push({
						value: today.format('yyyy-MM'),
						month: today.format('yyyy-MM')
					});
				}
				this.options_bar.xAxis.data.forEach((x, i) => {
					let data = monthProfitData.find(d => d.month.split(' ')[0] == x.month);
					if (data) {
						this.options_bar.series[0].data[i].value = (data.profit / 100).toFixed(2);
					}
				});
				this.echart_bar.setOption(this.options_bar);
			},
			yearBar() {
				this.daysBar = '年';
				let yearOrderData = []; // 每年毛利额
				// 按年统计毛利额
				this.profitList.forEach((item) => {
					if (item.profit) {
						yearOrderData.push({
							year: item.time.substring(0, 4),
							profit: item.profit,
						});
					}
				});
				// 统计每年的毛利额
				yearOrderData = yearOrderData.reduce((obj, item) => {
					let find = obj.find(i => i.year === item.year);
					let d = {
						...item,
						frequency: 1
					};
					find ? (find.profit = (parseFloat(find.profit) + parseFloat(item.profit)).toFixed(2), find
						.frequency++) : obj.push(d);
					return obj
				}, []);
				this.options_bar.xAxis.data = [];
				this.options_bar.series[0].data = []; // 取消数
				//获取系统当前时间
				let curDate = (new Date()).getTime();
				for (let i = 3; i > -2; i--) {
					curDate = (new Date()).getTime();
					// 将4年的时间单位换算成毫秒
					let fourYearsTime = (365 * i + 366) * 24 * 60 * 60 * 1000;
					//用当前时间-4年时间，得到4年前当前时间
					let result = curDate - fourYearsTime;
					let resultDate = new Date(result);

					this.options_bar.series[0].data.push({
						value: 0,
						name: resultDate.format('yyyy年')
					});
					this.options_bar.xAxis.data.push({
						value: resultDate.format('yyyy'),
						year: resultDate.format('yyyy')
					});
				}

				this.options_bar.xAxis.data.forEach((x, i) => {
					let data = yearOrderData.find(d => d.year.split(' ')[0] == x.year);
					if (data) {
						this.options_bar.series[0].data[i].value = (data.profit / 100).toFixed(2);
					}
				});
				this.echart_bar.setOption(this.options_bar);
			}

		},
		created() {
			this.getFruitCategoryInfo(); // 获取水果分类
			this.getFruitInfo(); // 获取水果信息
			this.getOrderInfo(); // 获取订单信息
		}
	};
</script>