Admin

超级管理员

上次登录时间：2021-12-26

上次登录地点：武汉

￥{{ item.value }}

{{ item.name }}

import {getHome} from '../../api/data'import * as echarts from 'echarts'

export default { name: "Home", data() { return { userImg: require('../../assets/image/user.png'), tableData: [], tableLabel: {}, countData: [ {'name': "今日支付订单", 'value': 1234, icon: "success", color: "#2ec7c9"}, {'name': "今日收藏订单", 'value': 1234, icon: "success", color: "#2ec7c9"}, {'name': "今日未支付订单", 'value': 1234, icon: "success", color: "#2ec7c9"}, {'name': "本月支付订单", 'value': 1234, icon: "success", color: "#2ec7c9"}, {'name': "本月收藏订单", 'value': 1234, icon: "success", color: "#2ec7c9"}, {'name': "本月未支付订单", 'value': 1234, icon: "success", color: "#2ec7c9"} ], echartsData: { //折线图 order: {

legend: { //图例文字颜色 color: "#333", }, grid: { left: "20%" }, //提示框 tooltip: { trigger: "axis", }, xAxis: { type: "category",//类目轴 data: [], axisLine: { lineStyle: { color: "#17b3a3" } }, axisLabel: { interval: 0, color: "#333", }

}, yAxis: [ { type: "value", axisLine: { lineStyle: { color: "#17b3a3" } } } ], color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'], series: [] }, //用户图 柱状图 user: { legend: { //图例文字颜色 textStyle: { color: "#333" }, }, grid: { left: "20%", }, //提示框 tooltip: { trigger: 'axis' }, xAxis: { type: "category",//类目轴 data: [], axisLine: { lineStyle: { color: "#17b3a3" } }, axisLabel: { // interval: 0, color: "#333" } }, yAxis: [ { type: "value", axisLine: { lineStyle: { color: "#17b3a3" } }, }

], color: ['#2ec7c9', '#6ba2de'], series: []

}, //饼状图 video:{ tooltip:{ trigger:"item", }, color:[ "#0f78f4", "#dd536b", "#9462e5", "#a6a6a6", "#e1bb22", "#39c362", "#3ed1cf" ], series:[] } } } }, methods: { getTabData() { getHome().then((res) => { //表格数据 this.tableData = res.data.tableData; this.tableLabel = res.data.tableLabel; //折线图数据 const order = res.data.orderData; console.log(order) this.echartsData.order.xAxis.data = order.date; let keyArray = Object.keys(order.data[0]); keyArray.forEach((key) => { this.echartsData.order.series.push({ name: key, data: order.data.map((item) => item[key]), type: 'line' }) });

const myEchartsOrder = echarts.init(this.$refs.echarts) myEchartsOrder.setOption(this.echartsData.order) //用户柱状图数据 this.echartsData.user.xAxis.data = res.data.userData.map((item) => item.date) this.echartsData.user.series.push({ "name": "新增用户", "data": res.data.userData.map((item) => item.new), //柱状图 "type": 'bar', });

this.echartsData.user.series.push({ "name": "活跃用户", "data": res.data.userData.map((item) => item.active), //柱状图 "type": 'bar', }); const myEchartsUser = echarts.init(this.$refs.userEcharts) myEchartsUser.setOption(this.echartsData.user) //视频饼图数据 this.echartsData.video.series.push( { data:res.data.videoData, type:'pie', } ) const myEchartsVideo = echarts.init(this.$refs.videoEcharts) myEchartsVideo.setOption(this.echartsData.video) }); } }, mounted() { this.getTabData(); }}

@import "~@/assets/scss/home";