|
|
@@ -1,25 +1,683 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
|
|
|
- <el-form-item label="时间" prop="empDate">
|
|
|
+ <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px" style="background: #ededed;">
|
|
|
+ <el-form-item label="时间" prop="empDate" style="margin-top: 18px;">
|
|
|
<el-date-picker clearable
|
|
|
v-model="queryParams.empDate"
|
|
|
type="date"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- placeholder="请选择时间">
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ placeholder="请选择月份">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item>
|
|
|
+ <el-form-item style="margin-top: 18px;">
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">统计</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="width: 33.3%;">
|
|
|
+ <div class="caption">金额-月趋势统计曲线</div>
|
|
|
+ <div ref="price_echarts_line" class="echarts_area"></div>
|
|
|
+ <div class="caption">稼动率-月趋势统计曲线</div>
|
|
|
+ <div ref="efficiency_echarts_line" class="echarts_area"></div>
|
|
|
+ <div class="caption">产出米数-月趋势统计曲线</div>
|
|
|
+ <div ref="lenght_echarts_line" class="echarts_area"></div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 33%;margin-left: 0.3%;height: 700px;">
|
|
|
+ <div class="caption">四分位分析</div>
|
|
|
+ <div ref="echarts41" class="echarts_4"></div>
|
|
|
+ <div ref="echarts42" class="echarts_4"></div>
|
|
|
+ <div ref="echarts43" class="echarts_4"></div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 33%;margin-left: 0.3%;">
|
|
|
+ <div class="caption">员工排名</div>
|
|
|
+ <table class="emptop_item" style="width: 100%;font-weight: bold;" cellspacing="0" cellpadding="0">
|
|
|
+ <thead>
|
|
|
+ <tr style="background-color: #409eff;color: #fff;">
|
|
|
+ <td style="width: 19%;"> 姓名</td>
|
|
|
+ <td style="width: 32%;">金额</td>
|
|
|
+ <td style="width: 32%;">米数</td>
|
|
|
+ <td style="width: 18%;">平均嫁动</td></tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+ <div style="overflow-y: auto;height: 680px;color: #666;">
|
|
|
+ <table class="emptop_item" style="width: 100%;" cellspacing="0" cellpadding="0">
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="item in empToplist">
|
|
|
+ <td style="width: 19%;"> {{ item.empName }}</td>
|
|
|
+ <td style="width: 32%;">{{ item.totalPrice }}</td>
|
|
|
+ <td style="width: 32%;">{{ item.length }}</td>
|
|
|
+ <td style="width: 18%;">{{ item.efficiency }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<style>
|
|
|
+ .caption{
|
|
|
+ width: 100%;
|
|
|
+ margin-left: 0px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666;
|
|
|
+ border-left: 3px solid #8282bd;
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+ .echarts_area{
|
|
|
+ width: 100%;height: 200px;padding: 15px;
|
|
|
+ border: 1px solid #ededed;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #f3f0f078;
|
|
|
+ }
|
|
|
+ .echarts_4{
|
|
|
+ width: 100%;
|
|
|
+ height: 33%;
|
|
|
+ padding: 15px;
|
|
|
+ border: 1px solid #ededed;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #f3f0f078;
|
|
|
+ }
|
|
|
+ tbody>tr{
|
|
|
+ border: 1px solid #7DA2CD;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ tbody>tr:hover{
|
|
|
+ background-color:#fff !important;
|
|
|
+ }
|
|
|
+ tbody>tr:nth-child(odd) {
|
|
|
+ /* 奇数行 */
|
|
|
+ background-color: rgb(241 242 243);
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ tbody>tr:nth-child(even) {
|
|
|
+ /* 偶数行 */
|
|
|
+ background-color: rgb(198 211 230 / 85%);
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+</style>
|
|
|
<script setup name="Emp">
|
|
|
-import {calc} from "@/api/emp/empCalc";
|
|
|
-const queryParams=ref({});
|
|
|
+ import {ref} from "vue";
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
+ import {monthCalc} from "@/api/emp/empCalc";
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ const queryParams=ref({});
|
|
|
+ const price_echarts_line=ref(null);
|
|
|
+ const efficiency_echarts_line=ref(null);
|
|
|
+ const lenght_echarts_line=ref(null);
|
|
|
+ const echarts41 = ref(null);
|
|
|
+ const echarts42 = ref(null);
|
|
|
+ const echarts43 = ref(null);
|
|
|
+ let empToplist =ref([]);
|
|
|
|
|
|
-return{
|
|
|
- queryParams,
|
|
|
-}
|
|
|
+ function init(){
|
|
|
+ queryParams.value={empDate:new Date().Format('yyyy-MM')}
|
|
|
+ getData();
|
|
|
+ }
|
|
|
+
|
|
|
+ function getData(){
|
|
|
+ let msg = ElMessage({
|
|
|
+ message: "正在查询数据中...",
|
|
|
+ type: "info",
|
|
|
+ duration:0,
|
|
|
+ })
|
|
|
+ monthCalc(queryParams.value.empDate).then((res)=>{
|
|
|
+ msg.close();
|
|
|
+ if(res.code!=200){
|
|
|
+ ElMessage({
|
|
|
+ message: "数据查询失败！",
|
|
|
+ type: "error"
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let tmpLst = [];
|
|
|
+
|
|
|
+ for(let i=0;i<res.data.emp.length;i++){
|
|
|
+ var x = res.data.emp[i];
|
|
|
+ var tmpItem=x;
|
|
|
+ for(let k in x){
|
|
|
+ if(k=='empName') tmpItem[k] = x[k];
|
|
|
+ else tmpItem[k] = (x[k]*1).toFixed(2);
|
|
|
+ }
|
|
|
+ tmpLst.push(tmpItem);
|
|
|
+ }
|
|
|
+ empToplist.value = tmpLst;
|
|
|
+ loadLine(res.data.trend);
|
|
|
+ load4(res.data.trend);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadLine(data){
|
|
|
+ var v_series = [];
|
|
|
+ var v_series_efficiency = [];
|
|
|
+ var v_series_length = [];
|
|
|
+ var times = [];
|
|
|
+ //总计曲线
|
|
|
+ var price=[];
|
|
|
+ var efficiency=[];
|
|
|
+ var length=[];
|
|
|
+ var priceA=[];
|
|
|
+ var efficiencyA=[];
|
|
|
+ var lengthA=[];
|
|
|
+ var priceB=[];
|
|
|
+ var efficiencyB=[];
|
|
|
+ var lengthB=[];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var tv = data[i]['empDate'].split("-")
|
|
|
+ times.push(tv[1] + "-" + tv[2])
|
|
|
+ price.push(data[i]['totalPrice']);
|
|
|
+ efficiency.push(data[i]['efficiency']);
|
|
|
+ length.push(data[i]['length']);
|
|
|
+ priceA.push(data[i]['totalPriceA']);
|
|
|
+ efficiencyA.push(data[i]['efficiencyA']);
|
|
|
+ lengthA.push(data[i]['lengthA']);
|
|
|
+ priceB.push(data[i]['totalPriceB']);
|
|
|
+ efficiencyB.push(data[i]['efficiencyB']);
|
|
|
+ lengthB.push(data[i]['lengthB']);
|
|
|
+ }
|
|
|
+ v_series.push({name: "总金额",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: price,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'red', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'red' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }});
|
|
|
+ v_series.push({name: "A班金额",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: priceA,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'black', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'black' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }});
|
|
|
+ v_series.push({name: "B班金额",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: priceB,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'blue', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'blue' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ v_series_efficiency.push(
|
|
|
+ {name: "总稼动率",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: efficiency,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'red', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'red' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ );
|
|
|
+ v_series_efficiency.push(
|
|
|
+ {name: "A班稼动率",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: efficiencyA,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'black', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'black' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ );
|
|
|
+ v_series_efficiency.push(
|
|
|
+ {name: "B班稼动率",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: efficiencyB,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'blue', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'blue' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ );
|
|
|
+ v_series_length.push(
|
|
|
+ {name: "总产出米数",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: length,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'red', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'red' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ );
|
|
|
+ v_series_length.push(
|
|
|
+ {name: "A班产出米数",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: lengthA,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'black', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'black' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ );
|
|
|
+ v_series_length.push(
|
|
|
+ {name: "B班产出米数",type: 'line',smooth: true,
|
|
|
+ //symbol: 'none',
|
|
|
+ data: lengthB,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'blue', // 这里设置折线的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: 'blue' // 这里同时设置线头的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ );
|
|
|
+
|
|
|
+ var opt = {
|
|
|
+ title: {
|
|
|
+ show: false, //不显示标题
|
|
|
+ text: '',
|
|
|
+ textStyle: {
|
|
|
+ color: "rgb(89, 151, 229)",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "30px"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function (params) {
|
|
|
+ let xv='';
|
|
|
+ let result = '';
|
|
|
+ params.forEach(function (item) {
|
|
|
+ xv=`${item.name}<br/>`;
|
|
|
+ result += ` ${item.marker} ${item.value}<br/>`;
|
|
|
+ });
|
|
|
+ return xv+result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true, //不显示图例
|
|
|
+ inactiveColor: "#04417A",
|
|
|
+ data: ["总金额","A班金额","B班金额"],
|
|
|
+ textStyle: {color: "#999",fontSize:16},
|
|
|
+ top: "0px"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '2%',
|
|
|
+ top: '16%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 45,
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ data: times
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7DA7CD",
|
|
|
+ type: "dashed",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: v_series
|
|
|
+ };
|
|
|
+ var opt_efficiency = {
|
|
|
+ title: {
|
|
|
+ show: false, //不显示标题
|
|
|
+ text: '',
|
|
|
+ textStyle: {
|
|
|
+ color: "rgb(89, 151, 229)",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "30px"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function (params) {
|
|
|
+ let xv='';
|
|
|
+ let result = '';
|
|
|
+ params.forEach(function (item) {
|
|
|
+ xv=`${item.name}<br/>`;
|
|
|
+ result += ` ${item.marker} ${item.value}<br/>`;
|
|
|
+ });
|
|
|
+ return xv+result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true, //不显示图例
|
|
|
+ inactiveColor: "#04417A",
|
|
|
+ data: ["总稼动率","A班稼动率","B班稼动率"],
|
|
|
+ textStyle: {color: "#999",fontSize:16},
|
|
|
+ top: "0px"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '2%',
|
|
|
+ top: '16%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 45,
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ data: times
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7DA7CD",
|
|
|
+ type: "dashed",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: v_series_efficiency
|
|
|
+ };
|
|
|
+ var opt_length = {
|
|
|
+ title: {
|
|
|
+ show: false, //不显示标题
|
|
|
+ text: '',
|
|
|
+ textStyle: {
|
|
|
+ color: "rgb(89, 151, 229)",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "30px"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function (params) {
|
|
|
+ let xv='';
|
|
|
+ let result = '';
|
|
|
+ params.forEach(function (item) {
|
|
|
+ xv=`${item.name}<br/>`;
|
|
|
+ result += ` ${item.marker} ${item.value}<br/>`;
|
|
|
+ });
|
|
|
+ return xv+result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true, //不显示图例
|
|
|
+ inactiveColor: "#04417A",
|
|
|
+ data: ["总产出米数","A班产出米数","B班产出米数"],
|
|
|
+ textStyle: {color: "#999",fontSize:16},
|
|
|
+ top: "0px"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '2%',
|
|
|
+ top: '16%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 45,
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ data: times
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#999"
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7DA7CD",
|
|
|
+ type: "dashed",
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: v_series_length
|
|
|
+ };
|
|
|
+ setTimeout(() => {
|
|
|
+ var echartsEle = echarts.init(price_echarts_line.value);
|
|
|
+ echartsEle.setOption(opt);
|
|
|
+ var echartsEle2 = echarts.init(efficiency_echarts_line.value);
|
|
|
+ echartsEle2.setOption(opt_efficiency);
|
|
|
+ var echartsEle3 = echarts.init(lenght_echarts_line.value);
|
|
|
+ echartsEle3.setOption(opt_length);
|
|
|
+ },500);
|
|
|
+ }
|
|
|
+
|
|
|
+ function load4(data){
|
|
|
+ var price=[];
|
|
|
+ var efficiency=[];
|
|
|
+ var length=[];
|
|
|
+ var priceA=[];
|
|
|
+ var efficiencyA=[];
|
|
|
+ var lengthA=[];
|
|
|
+ var priceB=[];
|
|
|
+ var efficiencyB=[];
|
|
|
+ var lengthB=[];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ price.push(data[i]['totalPrice']);
|
|
|
+ efficiency.push(data[i]['efficiency']);
|
|
|
+ length.push(data[i]['length']);
|
|
|
+ priceA.push(data[i]['totalPriceA']);
|
|
|
+ efficiencyA.push(data[i]['efficiencyA']);
|
|
|
+ lengthA.push(data[i]['lengthA']);
|
|
|
+ priceB.push(data[i]['totalPriceB']);
|
|
|
+ efficiencyB.push(data[i]['efficiencyB']);
|
|
|
+ lengthB.push(data[i]['lengthB']);
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ show: true, //不显示标题
|
|
|
+ text: '金额分析',
|
|
|
+ textStyle: {
|
|
|
+ color: "#666",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "center"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '2%',
|
|
|
+ top: '16%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function (params) {
|
|
|
+ var res = '';
|
|
|
+ res += '最 小 值：' + params.data[0].toFixed(2) + '<br/>';
|
|
|
+ res += '第一四分位数：' + params.data[1].toFixed(2) + '<br/>';
|
|
|
+ res += '中 位 数：' + params.data[2].toFixed(2) + '<br/>';
|
|
|
+ res += '第三四分位数：' + params.data[3].toFixed(2) + '<br/>';
|
|
|
+ res += '最 大 值：' + params.data[4].toFixed(2);
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['总金额', 'A班金额', 'B班金额'] // X轴数据，每个项目对应一个箱形图
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '箱形图',
|
|
|
+ type: 'boxplot',
|
|
|
+ data: [
|
|
|
+ price, // 项目A的数据
|
|
|
+ priceA, // 项目B的数据
|
|
|
+ priceB, // 项目C的数据
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var option2 = {
|
|
|
+ title: {
|
|
|
+ show: true, //不显示标题
|
|
|
+ text: '产出米数分析',
|
|
|
+ textStyle: {
|
|
|
+ color: "#666",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "center"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '2%',
|
|
|
+ top: '16%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function (params) {
|
|
|
+ var res = '';
|
|
|
+ res += '最 小 值：' + params.data[0].toFixed(2) + '<br/>';
|
|
|
+ res += '第一四分位数：' + params.data[1].toFixed(2) + '<br/>';
|
|
|
+ res += '中 位 数：' + params.data[2].toFixed(2) + '<br/>';
|
|
|
+ res += '第三四分位数：' + params.data[3].toFixed(2) + '<br/>';
|
|
|
+ res += '最 大 值：' + params.data[4].toFixed(2);
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['总产出', 'A班产出', 'B班产出'] // X轴数据，每个项目对应一个箱形图
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '箱形图',
|
|
|
+ type: 'boxplot',
|
|
|
+ data: [
|
|
|
+ length, // 项目A的数据
|
|
|
+ lengthA, // 项目B的数据
|
|
|
+ lengthB, // 项目C的数据
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var option3 = {
|
|
|
+ title: {
|
|
|
+ show: true, //不显示标题
|
|
|
+ text: '嫁动率分析',
|
|
|
+ textStyle: {
|
|
|
+ color: "#666",
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ top: "0px",
|
|
|
+ left: "center"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ bottom: '2%',
|
|
|
+ top: '16%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function (params) {
|
|
|
+ var res = '';
|
|
|
+ res += '最 小 值：' + params.data[0].toFixed(2) + '<br/>';
|
|
|
+ res += '第一四分位数：' + params.data[1].toFixed(2) + '<br/>';
|
|
|
+ res += '中 位 数：' + params.data[2].toFixed(2) + '<br/>';
|
|
|
+ res += '第三四分位数：' + params.data[3].toFixed(2) + '<br/>';
|
|
|
+ res += '最 大 值：' + params.data[4].toFixed(2);
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['总嫁动率', 'A班嫁动率', 'B班嫁动率'] // X轴数据，每个项目对应一个箱形图
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '箱形图',
|
|
|
+ type: 'boxplot',
|
|
|
+ data: [
|
|
|
+ efficiency, // 项目A的数据
|
|
|
+ efficiencyA, // 项目B的数据
|
|
|
+ efficiencyB, // 项目C的数据
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ setTimeout(() => {
|
|
|
+ var echartsEle = echarts.init(echarts41.value);
|
|
|
+ echartsEle.setOption(option);
|
|
|
+ var echartsEle2 = echarts.init(echarts42.value);
|
|
|
+ echartsEle2.setOption(option2);
|
|
|
+ var echartsEle3 = echarts.init(echarts43.value);
|
|
|
+ echartsEle3.setOption(option3);
|
|
|
+
|
|
|
+ },500);
|
|
|
+ }
|
|
|
+
|
|
|
+ init();
|
|
|
</script>
|
