bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

问题修改，厨房数据总览草图

This commit is contained in:
zzyuan 2025-06-20 10:33:10 +08:00
parent cc708e02ed
commit a9de1683ab
14 changed files with 1084 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/canteen/base/canteenStall/area/index.vue
View File

@ -15,7 +15,7 @@
style="margin-bottom: 20px"
/>
</div>
<div class="head-container" style>
<div class="head-container" >
<el-tree
style="height: 700px; overflow: scroll"
:data="treeOptions"
@ -34,8 +34,8 @@
@mousemove="onMousemove(data)"
@mouseleave="onMouseleave()"
>
<span v-if="isMousemoveId === data.id && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
<span v-if="isMousemoveId === data.id && node.label.length > 5">{{
node.label.slice(0, 5) + "..."
}}</span>
<span v-else>{{ node.label }}</span>

6
src/views/canteen/dish/dish/index.vue
View File

@ -20,7 +20,7 @@
/>
</div>
<div class="head-container" style>
<div class="head-container">
<el-tree style="height: 700px; overflow: scroll"
:data="treeOptions" :props="defaultProps"
:show-checkbox="true" :default-expand-all="true"
@ -28,8 +28,8 @@
ref="typeTree" node-key="dishesTypeId" highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
<span v-if="isMousemoveId === data.dishesTypeId && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
<span v-if="isMousemoveId === data.dishesTypeId && node.label.length > 5">{{
node.label.slice(0, 5) + "..."
}}</span>
<span v-else>{{ node.label }}</span>

6
src/views/canteen/dish/dish/indexOld.vue
View File

@ -20,7 +20,7 @@
/>
</div>
<div class="head-container" style>
<div class="head-container">
<el-tree style="height: 700px; overflow: scroll"
:data="treeOptions" :props="defaultProps"
:show-checkbox="true" :default-expand-all="false"
@ -28,8 +28,8 @@
ref="typeTree" node-key="typeId" highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
<span v-if="isMousemoveId === data.typeId && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
<span v-if="isMousemoveId === data.typeId && node.label.length > 5">{{
node.label.slice(0, 5) + "..."
}}</span>
<span v-else>{{ node.label }}</span>

6
src/views/canteen/dish/material/index.vue
View File

@ -17,7 +17,7 @@
/>
</div>
<div class="head-container" style>
<div class="head-container">
<el-tree
style="height: 700px; overflow: scroll"
:data="treeOptions"
@ -33,8 +33,8 @@
@check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
<span v-if="isMousemoveId === data.id && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
<span v-if="isMousemoveId === data.id && node.label.length > 5">{{
node.label.slice(0, 5) + "..."
}}</span>
<span v-else>{{ node.label }}</span>

8
src/views/canteen/dish/nutritionInfo/index.vue
View File

@ -19,16 +19,16 @@
/>
</div>
<div class="head-container" style>
<el-tree style="height: 700px; overflow: scroll"
<div class="head-container">
<el-tree style="height: 700px;overflow: scroll;"
:data="cascaderOptions" :props="defaultProps"
:show-checkbox="true" :default-expand-all="true"
:expand-on-click-node="false" :filter-node-method="filterNode"
ref="nutritionTypeTree" node-key="id" highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
<span v-if="isMousemoveId === data.id && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
<span v-if="isMousemoveId === data.id && node.label.length > 5">{{
node.label.slice(0, 5) + "..."
}}</span>
<span v-else>{{ node.label }}</span>

6
src/views/canteen/superstore/shopMaterial/index.vue
View File

@ -17,7 +17,7 @@
/>
</div>
<div class="head-container" style>
<div class="head-container">
<el-tree
style="height: 700px; overflow: scroll"
:data="treeOptions"
@ -33,8 +33,8 @@
@check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
<span v-if="isMousemoveId === data.id && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
<span v-if="isMousemoveId === data.id && node.label.length > 5">{{
node.label.slice(0, 5) + "..."
}}</span>
<span v-else>{{ node.label }}</span>

6
src/views/canteen/superstore/super/index.vue
View File

@ -308,7 +308,7 @@
style="margin-bottom: 20px"
/>
</div>
<div class="head-container" style>
<div class="head-container">
<el-tree
style="height: 700px; overflow: scroll"
:data="treeShopOptions"
@ -324,8 +324,8 @@
@check-change="handleCheckChange"
>
<span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
<span v-if="isMousemoveId === data.id && node.label.length > 10">{{
node.label.slice(0, 10) + "..."
<span v-if="isMousemoveId === data.id && node.label.length > 5">{{
node.label.slice(0, 5) + "..."
}}</span>
<span v-else>{{ node.label }}</span>
<span class="btn-items" v-if="isMousemoveId === data.id">

4
src/views/dashboard/PanelGroup.vue
View File

@ -199,12 +199,12 @@ export default {
<style lang="scss" scoped>
.panel-group {
margin-top: 18px;
// margin-top: 5px;
padding-left: 15px;
padding-right: 15px;
.card-panel-col {
margin-bottom: 20px;
margin-bottom: 10px;
padding-left: 8px!important;
padding-right: 8px!important;
}

23
src/views/index_v1.vue
View File

@ -58,32 +58,17 @@
<script>
import PanelGroup from './dashboard/PanelGroup'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './dashboard/mixins/resize'
import * as echarts from 'echarts'
import { getDataScreeningModelApi,
getCanteenOrdersAndSalesTrendsApi,
getSupermarketOrderAndSalesTrendApi,
getThisMonthSDishSalesRankingApi,
getProportionOfOrderTypesApi
} from "@/api/index";
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
export default {
mixins: [resize],
} from "@/api/index";
export default {
name: 'Index',
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
PanelGroup
},
data() {
return {

95
src/views/kitchen/dashboard/PanelGroup.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<el-row :gutter="36" class="panel-group">
<el-col :span="6" class="card-panel-col" v-for="(item,index) in topData" :key="index">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">
{{item.name}}
</div>
<count-to :start-val="0" :end-val="item.num" :duration="2000" class="card-panel-num" />
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
props: {
topData: {
type: Array,
default: []
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.panel-group {
// margin-top: 18px;
padding-left: 15px;
padding-right: 15px;
.card-panel-col {
margin-bottom: 10px;
padding-left: 8px!important;
padding-right: 8px!important;
}
.card-panel {
height: 100px;
// cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
padding: 20px;
border-radius: 4px;
// &:hover {
// .icon-message {
// background: #36a3f7;
// }
// }
// .icon-message {
// color: #36a3f7;
// }
.card-panel-description {
font-weight: bold;
margin: 0px;
margin-left: 0px;
margin-bottom: 10px;
.card-panel-text {
line-height: 18px;
// color: rgba(0, 0, 0, 0.5);
font-weight: normal;
font-size: 16px;
margin-bottom: 15px;
}
.card-panel-num {
font-size: 28px;
color: #000;
}
}
}
}
</style>

110
src/views/kitchen/dashboard/SubGroup.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<el-row :gutter="36" class="panel-group">
<el-col :span="12" class="card-panel-col" v-for="(item,index) in topData" :key="index">
<div class="card-panel">
<div class="card-panel-description">
<div class="card-panel-text">{{item.name}}</div>
<div style="width: 100%;height: 80px;display: flex;">
<div>
<div style="font-weight: normal;">正常</div>
<div>{{item.num1}}</div>
</div>
<div>
<div style="font-weight: normal;">缺失</div>
<div>{{item.num2}}</div>
</div>
<div>
<div style="font-weight: normal;">临期</div>
<div>{{item.num3}}</div>
</div>
<div>
<div style="font-weight: normal;">过期</div>
<div>{{item.num4}}</div>
</div>
</div>
<!-- <count-to :start-val="0" :end-val="item.num" :duration="2000" class="card-panel-num" /> -->
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
props: {
topData: {
type: Array,
default: []
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.panel-group {
// margin-top: 18px;
padding-left: 15px;
padding-right: 15px;
.card-panel-col {
margin-bottom: 10px;
padding-left: 8px!important;
padding-right: 8px!important;
}
.card-panel {
height: 140px;
// cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
padding: 20px;
border-radius: 4px;
// &:hover {
// .icon-message {
// background: #36a3f7;
// }
// }
// .icon-message {
// color: #36a3f7;
// }
.card-panel-description {
font-weight: bold;
margin: 0px;
margin-left: 0px;
margin-bottom: 10px;
.card-panel-text {
line-height: 18px;
// color: rgba(0, 0, 0, 0.5);
font-weight: bold;
font-size: 16px;
margin-bottom: 15px;
}
.card-panel-num {
font-size: 28px;
color: #000;
}
}
}
}
</style>

56
src/views/kitchen/dashboard/mixins/resize.js Normal file
View File

@ -0,0 +1,56 @@
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.initListener()
},
activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener()
}
// when keep-alive chart activated, auto resize
this.resize()
},
beforeDestroy() {
this.destroyListener()
},
deactivated() {
this.destroyListener()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize()
}, 100)
window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const { chart } = this
chart && chart.resize()
}
}
}

2
src/views/kitchen/devicesManage/deviesRecord/index.vue
View File

@ -31,7 +31,7 @@
</template>
</el-table-column>
<el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true"/>
<el-table-column label="设备类型" align="center" prop="deviceType" :show-overflow-tooltip="true"/>
<el-table-column label="设备类型" align="center" prop="deviceTypeName" :show-overflow-tooltip="true"/>
<el-table-column label="所属食堂" align="center" prop="canteenName" :show-overflow-tooltip="true" />
<el-table-column label="位置" align="center" prop="subPlace" :show-overflow-tooltip="true" />
<el-table-column label="工作状态" align="center" prop="workState" :show-overflow-tooltip="true">

794
src/views/kitchen/index.vue Normal file
View File

@ -0,0 +1,794 @@
<template>
<div class="dashboard-editor-container">
<panel-group :topData="topAreaOptions"/>
<el-row>
<el-col :span="18">
<sub-group :topData="subTopAreaOptions"/>
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
<div>
<el-radio-group v-model="type1" @change="changType1">
<el-radio-button :label="1">近7日</el-radio-button>
<el-radio-button :label="2">近30日</el-radio-button>
</el-radio-group>
</div>
</div>
<div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
</div>
</el-col>
<el-col :span="6">
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="16">
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
<div>
<el-radio-group v-model="type1" @change="changType1">
<el-radio-button :label="1">近7日</el-radio-button>
<el-radio-button :label="2">近30日</el-radio-button>
</el-radio-group>
</div>
</div>
<div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
</div>
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">商超订单及销量趋势</div>
<div>
<el-radio-group v-model="type2" @change="changType2">
<el-radio-button :label="1">近7日</el-radio-button>
<el-radio-button :label="2">近30日</el-radio-button>
</el-radio-group>
</div>
</div>
<div id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
</div>
</el-col>
<el-col :span="8">
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">近30天菜品销量排名</div>
<div id="lineChartThree" style="width: 100%;height: 380px;margin-bottom: 20px;"></div>
</div>
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">订单类型占比</div>
<div>
<el-radio-group v-model="type3" @change="changType3">
<el-radio-button :label="1">近7日</el-radio-button>
<el-radio-button :label="2">近30日</el-radio-button>
</el-radio-group>
</div>
</div>
<div id="barChartFour" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>
</div>
</el-col>
</el-row> -->
</div>
</template>
<script>
import PanelGroup from './dashboard/PanelGroup'
import SubGroup from './dashboard/SubGroup'
import * as echarts from 'echarts'
import { getDataScreeningModelApi,
getCanteenOrdersAndSalesTrendsApi,
getSupermarketOrderAndSalesTrendApi,
getThisMonthSDishSalesRankingApi,
getProportionOfOrderTypesApi
} from "@/api/index";
export default {
name: 'Index',
components: {
PanelGroup,
SubGroup
},
data() {
return {
topAreaOptions:[
{
"num": 0,
"rate": "0.00",
"name": "人员总数",
"lastDate": "2025-05-15"
},{
"num": 0,
"rate": "0.00",
"name": "设备总数（个）",
"lastDate": "2025-05-15"
},
{
"num": 0,
"rate": "0.00",
"name": "今日预警数（个）",
"lastDate": "2025-05-15"
},
{
"num": 0,
"rate": "0.00",
"name": "历史预警数（个）",
"lastDate": "2025-05-15"
}
],
subTopAreaOptions:[
{
"name": "健康证管理",
"num1": 1,
"num2": 2,
"num3": 3,
"num4": 4,
},{
"name": "报警记录",
"num1": 1,
"num2": 2,
"num3": 3,
}
],
type1:1,
type2:1,
type3:1,
myCharts1:null,
myCharts2:null,
myCharts3:null,
myCharts4:null,
}
},
mounted(){
this.getTopData()
this.InitEChartsOne()
this.InitEChartsTwo()
this.InitEChartsThree()
this.InitEChartsFour()
window.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
methods: {
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
console.log(e)
setTimeout(() => {
this.myCharts1.resize();
this.myCharts2.resize();
this.myCharts3.resize();
this.myCharts4.resize();
}, 500);
}
},
getTopData(){
// getDataScreeningModelApi({}).then((response) => {
// this.topAreaOptions = response.data.data;
// });
},
changType1(e){
console.log(this.type1)
this.InitEChartsOne()
this.myCharts1.resize();
},
InitEChartsOne() {
let chartData=[]
// let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
let weekDate=[]
let monthDate = []
let xDate = []
let salesData = []
let orderData = []
getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
chartData = response.data;
chartData.forEach((item,index)=>{
weekDate.push(item.weekday)
monthDate.push(item.orderDate)
salesData.push(item.salesValue)
orderData.push(item.orderValue)
})
if(this.type1==1){
xDate= weekDate
}else{
xDate = monthDate
}
var option = {
// title: {
// text: "食品经营情况",
// },
tooltip: {
trigger: "axis",
},
legend: {
data: ["销售额", "订单量"],
icon:"rect",
bottom: "0%",
},
grid: {
left: "5%",
right: "5%",
top: "20%",
bottom: "10%",
containLabel: true,
},
color: ["#4FA7FF", "#58F5CE"],
calculable: true,
xAxis: [
{
type: "category",
boundaryGap: false,
data: xDate,
},
],
yAxis: {
name: "销售额/订单量",
type: "value",
},
series: [
{
name: "销售额",
type: "line",
areaStyle: {
normal: {
type: "default",
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(79, 167, 255, 1)",
},
{
offset: 1,
color: "rgba(79, 167, 255, 1)",
},
],
false
),
},
},
smooth: true,
itemStyle: {
normal: { areaStyle: { type: "default" } },
},
data: salesData,
},
{
name: "订单量",
type: "line",
areaStyle: {
normal: {
type: "default",
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(92, 255, 214, 1)",
},
{
offset: 1,
color: "rgba(92, 255, 214, 1)",
},
],
false
),
},
},
smooth: true,
itemStyle: { normal: { areaStyle: { type: "default" } } },
data: orderData,
},
],
};
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
this.myCharts1.setOption(option)
});
},
changType2(e){
console.log(this.type2)
this.InitEChartsTwo()
this.myCharts2.resize();
},
InitEChartsTwo() {
let chartData=[]
// let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
let weekDate=[]
let monthDate = []
let xDate = []
let salesData = []
let orderData = []
getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
chartData = response.data;
chartData.forEach((item,index)=>{
weekDate.push(item.weekday)
monthDate.push(item.orderDate)
salesData.push(item.salesValue)
orderData.push(item.orderValue)
})
if(this.type2==1){
xDate= weekDate
}else{
xDate = monthDate
}
var option = {
// title: {
// text: "食品经营情况",
// },
tooltip: {
trigger: "axis",
},
legend: {
data: ["销售额", "订单量"],
icon:"rect",
bottom: "0%",
},
grid: {
left: "5%",
right: "5%",
top: "20%",
bottom: "10%",
containLabel: true,
},
color: ["#4FA7FF", "#58F5CE"],
calculable: true,
xAxis: [
{
type: "category",
boundaryGap: false,
data: xDate,
},
],
yAxis: {
name: "销售额/订单量",
type: "value",
},
series: [
{
name: "销售额",
type: "line",
areaStyle: {
normal: {
type: "default",
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(79, 167, 255, 1)",
},
{
offset: 1,
color: "rgba(79, 167, 255, 1)",
},
],
false
),
},
},
smooth: true,
itemStyle: {
normal: { areaStyle: { type: "default" } },
},
data: salesData,
},
{
name: "订单量",
type: "line",
areaStyle: {
normal: {
type: "default",
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(92, 255, 214, 1)",
},
{
offset: 1,
color: "rgba(92, 255, 214, 1)",
},
],
false
),
},
},
smooth: true,
itemStyle: { normal: { areaStyle: { type: "default" } } },
data: orderData,
},
],
};
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
this.myCharts2.setOption(option)
});
},
InitEChartsThree() {
var getName = [];
var getValue = [];
var chartData=[]
getThisMonthSDishSalesRankingApi().then((response) => {
chartData = response.data;
chartData.forEach((item,index)=>{
getName.push(item.name)
getValue.push(item.num)
})
var max = Math.max.apply(null, getValue);
var getMax = [];
for (var i = 0; i < getName.length; i++) {
getMax.push(max+20);
}
var option = {
backgroundColor: "#fff",
grid: {
left: "10%",
right: "2%",
bottom: "2%",
top: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {
return params[0].name + " : " + params[0].value;
},
},
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
type: "category",
inverse: true,
offset: 100,
axisLabel: {
show: true,
align: "left",
textStyle: {
color: "#66cc00",
},
formatter: function (value, index) {
var num = "";
var str = "";
var no = "NO.";
num = index + 1;
if (index === 0) {
str = " {num1|" + num + "} {title1|" + value + "}";
} else if (index === 1) {
str = " {num2|" + num + "} {title2|" + value + "}";
} else if (index === 2) {
str = " {num3|" + num + "} {title3|" + value + "}";
} else {
str = " {num|" + num + "} {title|" + value + "}";
}
return str;
},
rich: {
no: {
color: "#333",
fontSize: 14,
},
no1: {
color: "#333",
fontSize: 14,
},
no2: {
color: "#333",
fontSize: 14,
},
no3: {
color: "#333",
fontSize: 14,
},
num: {
color: "#fff",
backgroundColor: "#5281F8",
width: 20,
height: 20,
fontSize: 14,
align: "center",
borderRadius: 100,
},
num1: {
color: "#fff",
backgroundColor: "#EDA54F",
width: 20,
height: 20,
fontSize: 14,
align: "center",
borderRadius: 100,
},
num2: {
color: "#fff",
backgroundColor: "#EDA54F",
width: 20,
height: 20,
fontSize: 14,
align: "center",
borderRadius: 100,
},
num3: {
color: "#fff",
backgroundColor: "#EDA54F",
width: 20,
height: 20,
fontSize: 14,
align: "center",
borderRadius: 100,
},
title: {
color: "#333333",
},
title1: {
color: "#333333",
},
title2: {
color: "#333333",
},
title3: {
color: "#333333",
},
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: getName,
},
{
type: "category",
inverse: true,
offset: -50,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
interval: 0,
color: "#666",
align: "left",
margin: 20,
fontSize: 13,
formatter: function (value, index) {
return (
getValue[index]
);
},
},
data: getValue,
},
],
series: [
{
name: "值",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgb(0, 111, 104, 1)",
},
{
offset: 1,
color: "rgb(0, 111, 104, 1)",
},
]),
},
},
barWidth: 14,
data: getValue,
},
{
name: "背景",
type: "bar",
barWidth: 14,
barGap: "-100%",
data: getMax,
itemStyle: {
normal: {
color: "rgba(224, 233, 255, 1)",
barBorderRadius: 30,
},
},
},
],
};
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
this.myCharts3.setOption(option)
// // 根据页面大小自动响应图表大小
// window.addEventListener("resize3", function () {
// myCharts3.resize();
// });
});
},
changType3(e){
console.log(this.type3)
this.InitEChartsFour()
this.myCharts4.resize();
},
InitEChartsFour() {
var chartData=[]
getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
chartData = response.data;
var m2R2Data = []
var sumNum = 0
chartData.forEach((item,index)=>{
let obj = {}
sumNum=sumNum+item.num
if(index==0){
obj = {
value: item.num,
legendname: item.name,
name: item.name+' '+ item.num,
itemStyle: { color: "#5085f2" },
}
}
if(index==1){
obj = {
value: item.num,
legendname: item.name,
name: item.name+' '+ item.num,
itemStyle: { color: "#f2719a" },
}
}
if(index==2){
obj = {
value: item.num,
legendname: item.name,
name: item.name+' '+ item.num,
itemStyle: { color: "#fdb301" },
}
}
m2R2Data.push(obj)
})
// var m2R2Data = [
// {
// value: 310,
// legendname: "种类02",
// name: "种类02 310",
// itemStyle: { color: "#5085f2" },
// },
// {
// value: 335,
// legendname: "种类05",
// name: "种类05 335",
// itemStyle: { color: "#f2719a" },
// },
// {
// value: 335,
// legendname: "种类08",
// name: "种类08 335",
// itemStyle: { color: "#fdb301" },
// }
// ];
var option = {
title: [
{
text: "订单总数",
subtext: sumNum + "个",
textStyle: {
fontSize: 20,
color: "black",
},
subtextStyle: {
fontSize: 20,
color: "black",
},
textAlign: "center",
x: "34.5%",
y: "44%",
},
],
tooltip: {
trigger: "item",
formatter: function (parms) {
var str =
parms.seriesName +
"</br>" +
parms.marker +
"" +
parms.data.legendname +
"</br>" +
"数量：" +
parms.data.value +
"</br>" +
"占比：" +
parms.percent +
"%";
return str;
},
},
legend: {
type: "scroll",
orient: "vertical",
left: "70%",
align: "left",
top: "middle",
textStyle: {
color: "#8C8C8C",
},
height: 250,
},
series: [
{
name: "标题",
type: "pie",
center: ["35%", "50%"],
radius: ["65%", "90%"],
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "outter",
formatter: function (parms) {
return parms.data.legendname;
},
},
},
labelLine: {
normal: {
length: 5,
length2: 3,
smooth: true,
},
},
data: m2R2Data,
},
],
};
this.myCharts4 = echarts.init(document.querySelector('#barChartFour'));
this.myCharts4.setOption(option)
// 根据页面大小自动响应图表大小
// window.addEventListener("resize4", function () {
// myCharts4.resize();
// });
});
}
}
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 15px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>