|
|
@@ -0,0 +1,597 @@
|
|
|
+<template>
|
|
|
+ <div style="padding:10px" @click.stop="void(0)">
|
|
|
+ <div class="" style="text-align: center;top:2%;width: 100%;letter-spacing: 5px;color: #cdd2fb;font-size: 18px;">
|
|
|
+ <span style="position: relative;">
|
|
|
+ <el-button style="margin-left:10px" @click="impquery">刷新</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="height: 790px;width: 100%;background-color: rgb(237 237 237 / 23%);margin-top: 10px;display: flex;">
|
|
|
+ <div style="height: 790px;width: 28%;margin-right: 1%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;">存放时间统计(Top10)</div>
|
|
|
+ <div style="height: 760px;width: 100%;border: 1px solid #ededed;background: #fff;" ref="top10"></div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 790px;width: 70%;margin-left: 1%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;">库存分析（近30日）
|
|
|
+ <div style="float: right;"><el-button v-for="item in btns" @click="switchBtn(0,item.c1)" :type="btnIndex1==item.c1?'primary':''">{{ item.n }}</el-button></div></div>
|
|
|
+ <div style="height: 400px;width: 100%;" ref="echarts1"></div>
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;">库存统计（今日）
|
|
|
+ <div style="float: right;"><el-button v-for="item in btns" @click="switchBtn(1,item.c)" :type="btnIndex2==item.c?'primary':''">{{ item.n }}</el-button></div>
|
|
|
+ </div>
|
|
|
+ <el-table class="titletable" cellspacing="0" cellpadding="0" height="330px" width="800px" :data="datalist">
|
|
|
+ <el-table-column label="种类" align="center" prop="name" fixed></el-table-column>
|
|
|
+ <el-table-column label="入库数量" align="center" prop="in"></el-table-column>
|
|
|
+ <el-table-column label="出库数量" align="center" prop="out"></el-table-column>
|
|
|
+ <el-table-column label="最大库存量" align="center" prop="max"></el-table-column>
|
|
|
+ <el-table-column label="最小库存量" align="center" prop="min"></el-table-column>
|
|
|
+ <el-table-column label="平均库存" align="center" prop="avg"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="占比详情" v-model="openDetail" width="500px" append-to-body>
|
|
|
+ <el-form style="height:350px;width:100%;">
|
|
|
+ <el-table row-key="id" :data="detaildata" style="height:330px;width:100%;">
|
|
|
+ <el-table-column label="名称" align="left" prop="name" ></el-table-column>
|
|
|
+ <el-table-column label="数量" align="left" prop="num" ></el-table-column>
|
|
|
+ <el-table-column label="占比(%)" align="left" prop="ratio">
|
|
|
+ <template #default="scope">
|
|
|
+ {{(scope.row.ratio*100).toFixed(2)+'%'}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="openDetail=false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { ref,onMounted,watch } from 'vue';
|
|
|
+ import {pantou,baiPi} from "@/api/house/api";
|
|
|
+ import { ElDatePicker,ElMessage } from 'element-plus';
|
|
|
+ import 'element-plus/dist/index.css'; // 确保导入样式文件
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ export default {
|
|
|
+ props:{
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+
|
|
|
+ },
|
|
|
+ setup(props,{emit}){
|
|
|
+ const { proxy } = getCurrentInstance();
|
|
|
+ let datalist=ref([]);
|
|
|
+ const cacheData=ref({});
|
|
|
+ const loading=ref(true);
|
|
|
+ const echarts1=ref(null);
|
|
|
+ const top10=ref(null);
|
|
|
+ const detaildata=ref([]);
|
|
|
+ const openDetail=ref(false);
|
|
|
+ const btns=ref([{
|
|
|
+ n:'米数',c:'meterStocks',c1:'meterMonthStocks'
|
|
|
+ },{n:'卷数',c:'rollStocks',c1:'rollMonthStocks'},{n:'重量',c:'weightStocks',c1:'weightMonthStocks'}]);
|
|
|
+ const btnIndex1=ref('meterMonthStocks');
|
|
|
+ const btnIndex2=ref('meterStocks');
|
|
|
+ function impquery(){
|
|
|
+ datalist.value=[];
|
|
|
+ const msg = ElMessage({
|
|
|
+ message:"正在加载数据",
|
|
|
+ type:"info",
|
|
|
+ duration:0, //一直显示
|
|
|
+ });
|
|
|
+ loading.value = true;
|
|
|
+ baiPi().then((res)=>{
|
|
|
+ loading.value = false;
|
|
|
+ msg.close();
|
|
|
+ if(res.code!=200){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ cacheData.value = res.data;
|
|
|
+ datalist.value = res.data.meterStocks;
|
|
|
+ showTop(res.data.tops);
|
|
|
+ showLine(res.data.meterMonthStocks);
|
|
|
+ }).catch(res=>{
|
|
|
+ ElMessage({
|
|
|
+ message:"数据获取失败！",
|
|
|
+ type:"error",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function showLine(data){
|
|
|
+ var myChart = echarts.init(echarts1.value);
|
|
|
+ const dataColor = ['#4EB2FE', '#f19051', '#F47505', '#20d450'];
|
|
|
+ const data1 = [];
|
|
|
+ const data2 = [];
|
|
|
+ const data3 = [];
|
|
|
+ const nameArr = [];
|
|
|
+ for (let index = 0; index < data.length; index++) {
|
|
|
+ const element = data[index];
|
|
|
+ data1.push(element.max);
|
|
|
+ data2.push(element.min);
|
|
|
+ data3.push(element.avg);
|
|
|
+ nameArr.push(element.date.substring(5));
|
|
|
+ }
|
|
|
+ const axiscolor = ['#dde1e8', '#222222'];
|
|
|
+ const colorArr1 = ['#f66c6b', '#fb8484', '#ff9d9d'];
|
|
|
+ const colorArr2 = ['#1aa4f2', '#4eb6f9', '#88cbfe'];
|
|
|
+ const color1 = {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ x2: 0,
|
|
|
+ y: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: colorArr1[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: colorArr1[1]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: colorArr1[1]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ const color2 = {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ x2: 0,
|
|
|
+ y: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: colorArr2[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: colorArr2[1]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: colorArr2[1]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ const barWidth = 8;
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '100%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: [{
|
|
|
+ data: ['最大库存', '最小库存', '平均库存'],
|
|
|
+ top: '5%',
|
|
|
+ left: '35%',
|
|
|
+ icon: 'rect',
|
|
|
+ itemWidth: 20,
|
|
|
+ itemHeight: 10,
|
|
|
+ formatter: function(name) {
|
|
|
+ return name;
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ xAxis: {
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: axiscolor[1],
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ fontSize: 12,
|
|
|
+ rotate: -45,
|
|
|
+ color: axiscolor[1]
|
|
|
+ },
|
|
|
+ data: nameArr
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ name: '单位：个',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: axiscolor[0],
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#dde1e8',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontFamily: 'Dinpro',
|
|
|
+ fontSize: 14,
|
|
|
+ color: axiscolor[1]
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '最大库存',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: barWidth,
|
|
|
+ barGap: '0%',
|
|
|
+ data: data1,
|
|
|
+ itemStyle: {
|
|
|
+ color: color1
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '最小库存',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: barWidth,
|
|
|
+ barGap: '20%',
|
|
|
+ data: data2,
|
|
|
+ itemStyle: {
|
|
|
+ color: color2
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '平均库存',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 1,
|
|
|
+ yAxisIndex: 0, // 修改这里为 0，因为只有一个 y 轴
|
|
|
+ itemStyle: {
|
|
|
+ color: dataColor[3]
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ color: dataColor[3]
|
|
|
+ },
|
|
|
+ showSymbol: true,
|
|
|
+ data: data3
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: '15%',
|
|
|
+ left: '5%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '15%'
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ // 添加点击事件监听器
|
|
|
+ myChart.on('click', function (params) {
|
|
|
+ if (params.componentType === 'series') {
|
|
|
+ //console.log('点击了系列', params.seriesName, '的', params.dataIndex, '项');
|
|
|
+ // 在这里处理你的逻辑，例如更新数据等
|
|
|
+ openDetail.value=true;
|
|
|
+ detaildata.value = cacheData.value[btnIndex1.value][params.dataIndex].details;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function showTop(data){
|
|
|
+ var myChart = echarts.init(top10.value);
|
|
|
+
|
|
|
+ let data1 = [];
|
|
|
+ let data2 = [];
|
|
|
+ let data3 = [];
|
|
|
+ for (let index = 0; index < data.length; index++) {
|
|
|
+ const element = data[index];
|
|
|
+ data3.push(element.day);
|
|
|
+ data2.push(index+1);
|
|
|
+ data1.push({
|
|
|
+ name:element.name,
|
|
|
+ date:element.date,
|
|
|
+ value:element.day,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let data4 = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
|
|
|
+ let style = {
|
|
|
+ width: 24,
|
|
|
+ height: 18,
|
|
|
+ padding: [2, 2, 0, 0],
|
|
|
+ fontSize: 12,
|
|
|
+ align: "center",
|
|
|
+ color: "#ffffff"
|
|
|
+ };
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: "item",
|
|
|
+ padding: [8, 15],
|
|
|
+ backgroundColor: "rgba(12, 51, 115,0.8)",
|
|
|
+ borderColor: "rgba(3, 11, 44, 0.5)",
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, 1)",
|
|
|
+ fontFamily: "SourceHanSansCN-Normal",
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ if(params.seriesIndex==0) return "";
|
|
|
+ const name = params.name;
|
|
|
+ const date = params.data.date; // 假设数据中包含 date 字段
|
|
|
+ const value = params.value;
|
|
|
+ // if (params.componentType === 'yAxis' && params.componentIndex === 0) {
|
|
|
+ // return null; // 屏蔽第一个 yAxis 的提示
|
|
|
+ // }
|
|
|
+ return `${name}<br/>日期：${date}<br/>距当前天数：${value}`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "10%",
|
|
|
+ right: "8%",
|
|
|
+ top: "1%",
|
|
|
+ bottom: "2%"
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ type: "value",
|
|
|
+ show: false,
|
|
|
+ axisLine: {
|
|
|
+ //x轴坐标轴，false为隐藏，true为显示
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ type: "category",
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisPointer: { show: false },
|
|
|
+ triggerEvent: false, // 关键解决方案
|
|
|
+ inverse: true,
|
|
|
+ data: data2,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: "rgba(255, 255, 255, 1)",
|
|
|
+ fontFamily: "SourceHanSansCN-Normal",
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ formatter: function (params, index) {
|
|
|
+ // var index = params;
|
|
|
+ const id = index + 1;
|
|
|
+ //console.log("111111", params);
|
|
|
+ if (id < 4) {
|
|
|
+ return [`{rank${id}|${id}}`].join("\n");
|
|
|
+ } else {
|
|
|
+ return [`{rank|${id}}`].join("\n");
|
|
|
+ }
|
|
|
+ // if (index - 1 < 3) {
|
|
|
+ // return ;
|
|
|
+ // } else {
|
|
|
+ // return ['{b|' + index + '}'].join('\n');
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ rank1: {
|
|
|
+ ...style,
|
|
|
+ backgroundColor: {
|
|
|
+ image:
|
|
|
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAARZJREFUOE/tlb1KA0EUhc+5u41F1lbB1tY0Gt8iPoD2eQFtLXwAU/sMIoKQQd0tUghiqW1awZQWQiSGTLzjzrKbymKmCRkYhjt/3zDnzhza/VYXIlegbIEJQEGzTf9i0TGtZVz1+VjGsGmP9/kdaoW2k324zcGljT3o3wBdP6YptpcB1p06DAA0BdeAUisvfCWy17CPweMpgblelYocVIMyC2+x8XnM6+dJLAAAecH0pxsP4DJTBjEBT5jOjmIBbvA1OeFw+B0egOQS5uEsWhat4ks+yOYQ0a80xG9qaQrNz6rQdjZfQe4FArzRFO0m4DDb/XWZC0B2nKFASnOp+YEzG41TQFIA3nh0bmVA75gl58zzUR2wADMYXqBI8VUUAAAAAElFTkSuQmCC"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rank2: {
|
|
|
+ ...style,
|
|
|
+ backgroundColor: {
|
|
|
+ image:
|
|
|
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAAPFJREFUOE/tlTFKA0EUhr9/UuUGK9imTW4SD6CNlc2GgJgubBYPoLWHEEHwBjaWprUVIsQ+m2YnZHYdZtdydxrxwcDMMLwP5r33/7I5U9ADKEHQXLY6m9Z9eHZ79+4LuNKMZ4KQXWmDlLi7bgAHUcpJC2CsS9wPAKU+W5XSrv4Bvsg/Nbxny41yyihfVFfgiT3numbXew18J8IbYhoPULX8SzwAvFJwFgvwyJALXVL0D4A7vllE66K/OMmZKTH1eHRXU6vUibuPo1y/I417UtO1UiZNwJIRA3OL7Kk3l1C6f5lL7RsNE3KG80lJpjkfIeAAkjJvqT1lfksAAAAASUVORK5CYII="
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rank3: {
|
|
|
+ ...style,
|
|
|
+ backgroundColor: {
|
|
|
+ image:
|
|
|
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAAPBJREFUOE/tlT9OwzAUh7+fYWfpAFIZOrBSpblHegC69wLtihAHoDOHQAgabsDSsV1ZKzUnaDvFla00JFG31AviWZZly3rfs98/2ZQE8Yq4xokBVJnHfXU9dSYyDGMN+PR6CpFN2XjlTmk7gDMsU8xNE2BLi9sDUFya6jnuBf+AemAYZnww0RN5kC8q/PlOhwfdsju7DzzAhTEsEElIgAN9hQR8s2UYCvDGFSP12IcAvBAxlQJF0d/M5Bz50b6aGqwGRRaU5XrOEsP9WQBipZh+vVzPuUM8Y+iWZfvYUNzNi0bzaTab38xdc8mjIn6qgAME+UlV+Na7MwAAAABJRU5ErkJggg=="
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rank: {
|
|
|
+ ...style,
|
|
|
+ backgroundColor: {
|
|
|
+ image:
|
|
|
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAAXNSR0IArs4c6QAAAQdJREFUOE/tlb9KxEAQh7/fWvkGCra2+hK59ixWbLSx8gW0FfEBFHOVna0JhyD4BjaWprUVvM5SDzQjm0tCTsQmt424zbDsn29mmPmNBiMbCi4RKxIgCFbuF/vz2QTHQe51S2cpSe1F9ec9AcGpSea1OgcYpGat1/0iqKLOfOVmu/QP+F4QiPOs4JATlSFPC09RABrc2Ae7+Y7eogDqonmYlgxjAkI/3cUDOO4/p2zFATjGy6/sXe3rPQbg7LrgKFoV/cFOTlIrJVR1ZE+xw2G5D5LXEbsktUeJjQUBitxrc15NL2wdxylizTUR1AMldKRrhsvSLML2TrMP/s7ePZs4Hm/rqQv4AucUYfTiSAZXAAAAAElFTkSuQmCC"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ a: {
|
|
|
+ padding: [0, 0, 35, 10]
|
|
|
+ },
|
|
|
+
|
|
|
+ b: {
|
|
|
+ backgroundColor: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#29DFF6"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#00A8FF"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ },
|
|
|
+ color: "#D1E7FF",
|
|
|
+ width: 60,
|
|
|
+ height: 60,
|
|
|
+ padding: [5, 0, 0, 0],
|
|
|
+ borderRadius: 30,
|
|
|
+ fontSize: 14,
|
|
|
+ align: "center",
|
|
|
+ fontWeight: 500
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisTick: "none",
|
|
|
+ axisLine: "none",
|
|
|
+ show: true,
|
|
|
+ position: "right",
|
|
|
+ axisLabel: {
|
|
|
+ inside: true,
|
|
|
+
|
|
|
+ // verticalAlign: "bottom",
|
|
|
+ // lineHeight: 30,
|
|
|
+ padding: [-24, 0, 0, 0], // 上、右、下、左（负值可上移文字）
|
|
|
+ // verticalAlign: "top", // 设置垂直对齐方式
|
|
|
+ margin: 0, //刻度标签与轴线之间的距离
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ verticalAlign: "top", // 设置垂直对齐方式
|
|
|
+ color: "#445482",
|
|
|
+ fontFamily: "SourceHanSansCN-Normal",
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ formatter: function (value) {
|
|
|
+ return value + "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data3
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "背景",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 12,
|
|
|
+ barGap: "-100%",
|
|
|
+ data: data4,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#D1E7FF",
|
|
|
+ barBorderRadius: 10
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ name: "",
|
|
|
+ type: "bar",
|
|
|
+ data: data1,
|
|
|
+ barWidth: 12, // 柱子宽度
|
|
|
+ showBackground: false,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#D1E7FF"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#D1E7FF"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ offset: [5, -17],
|
|
|
+ color: "#132852",
|
|
|
+ fontFamily: "SourceHanSansCN-Normal",
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 500,
|
|
|
+ position: "left",
|
|
|
+ align: "left",
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.data.name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: [5, 5, 5, 5],
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#29DFF6"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#00A8FF"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ width: 15,
|
|
|
+ yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
|
|
|
+ show: false, // 是否显示滑动条，不影响使用
|
|
|
+ type: "slider" // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
|
+ // startValue: 1, // 从头开始。
|
|
|
+ // endValue: 4 // 展示到第几个。
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ function switchBtn(t,t1){
|
|
|
+ if(t==0){
|
|
|
+ btnIndex1.value = t1;
|
|
|
+ //切换30日分析图形
|
|
|
+ showLine(cacheData.value[t1]);
|
|
|
+ }else{
|
|
|
+ btnIndex2.value = t1;
|
|
|
+ datalist.value = cacheData.value[t1];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onMounted(()=>{
|
|
|
+ impquery();
|
|
|
+ })
|
|
|
+
|
|
|
+ return{
|
|
|
+ datalist,
|
|
|
+ impquery,
|
|
|
+ switchBtn,
|
|
|
+ loading,
|
|
|
+ top10,
|
|
|
+ echarts1,
|
|
|
+ btns,
|
|
|
+ btnIndex1,
|
|
|
+ btnIndex2,
|
|
|
+ detaildata,
|
|
|
+ openDetail,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
