<!DOCTYPE html> <html> <head> <meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache"> <title>接å£ç›‘控</title> <script type="text/javascript"> var initlized = false; var pageVue = null; function loadJsCss(callback) { var jscss_urls = [ { id: "css1", type: "css", url: "//at.alicdn.com/t/font_2374495_13ltsxm2eor.css" }, { id: "js9", type: "js", url: "//cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js" }, ]; window.top.initJsCss(document, jscss_urls, callback); } function initVue() { new BasicsVue({ el: "#vbody", data: { title:"接å£ç›‘控", }, created() { }, mounted() { this.initData(); this.$nextTick(() => { // 以æœåŠ¡çš„æ–¹å¼è°ƒç”¨çš„ Loading 需è¦å¼‚æ¥å…³é— hideLoading(); }); }, methods:{ initData() { var myChart = echarts.init(document.getElementById("echarts")); var myChart2 = echarts.init(document.getElementById("echarts2")); //接å£è°ƒç”¨æ¬¡æ•°ï¼Œd2 var option = { title: { text: '接å£è°ƒç”¨ç»Ÿè®¡', subtext: '次数' }, tooltip: { trigger: 'axis' }, legend: { data: ['Rainfall', 'Evaporation'] }, toolbox: { show: true, feature: { //dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, //saveAsImage: { show: true } } }, calculable: true, xAxis: [ { type: 'category', // prettier-ignore data: ['产å“分类', 'SKU', '医院', '辖区', 'æž¶æž„', '订å•', 'å‘è´§', '预留å•'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '', type: 'bar', data: [ 70, 53, 251, 76, 135, 162, 32, 20 ], markPoint: { data: [ { type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ] }, markLine: { data: [{ type: 'average', name: 'Avg' }] } }, { name: '', type: 'bar', data: [ 170, 243, 200, 96, 155, 172, 62, 80 ], markPoint: { data: [ { name: 'Max', value: 135, xAxis: 7, yAxis: 183 }, { name: 'Min', value: 7, xAxis: 11, yAxis: 3 } ] }, markLine: { data: [{ type: 'average', name: 'Avg' }] } } ] }; myChart.setOption(option); //折线图 var option2 = { title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { data: ['产å“分类', 'SKU', '医院', '辖区', 'æž¶æž„', '订å•', 'å‘è´§', '预留å•'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { //saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: '产å“分类', type: 'line', stack: 'Total', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'SKU', type: 'line', stack: 'Total', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '医院', type: 'line', stack: 'Total', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '辖区', type: 'line', stack: 'Total', data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'æž¶æž„', type: 'line', stack: 'Total', data: [820, 932, 901, 934, 1290, 1330, 1320] }, { name: '订å•', type: 'line', stack: 'Total', data: [180, 262, 261, 144, 290, 430, 510] }, { name: 'å‘è´§', type: 'line', stack: 'Total', data: [220, 332, 501, 634, 490, 230, 520] }, { name: '预留å•', type: 'line', stack: 'Total', data: [620, 832, 601, 934, 1290, 1130, 1220] } ] }; myChart2.setOption(option2); }, } }); } loadJsCss(function() { initVue(); }); </script> <style> [v-cloak] { display: none !important; } .d3 { display: inline-block; height: 422px; text-align: center; width: 41.5%; border: solid 1px; margin: 2px; margin-left: 3px; } .d1 { width: 99.5%; height: 150px; line-height: 90px; border: solid 1px; margin: 0px 2px; float: left; } .d2 { display: inline-block; height: 208px; width: 750px; text-align: center; border: solid 1px; margin: 2px; margin-top: 0; } .d4 { display: inline-block; height: 208px; width: 750px; text-align: center; border: solid 1px; margin: 3px; margin-bottom: 0; } .d8 { text-align: center; height: 30px; } .d9 { display: inline-block; height: 200px; margin-left: 80px; } </style> </head> <body style="margin: 0px;"> <div v-cloak id="vbody"> <div id="page_root"> <div class="topbar"> <span>{{title}}</span> </div> <div class="d1"> <div class="d9"> <div class="d8">产å“分类</div> <div class="d8"><i class="iconfont icon-productclassification" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">25/10240</div> </div> <div class="d9"> <div class="d8">SKU</div> <div class="d8"><i class="iconfont icon-product" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">12/10240</div> </div> <div class="d9"> <div class="d8">医院</div> <div class="d8"><i class="iconfont icon-customermanagement" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">36/7143</div> </div> <div class="d9"> <div class="d8">辖区</div> <div class="d8"><i class="el-icon-c-scale-to-original" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">26/8938</div> </div> <div class="d9"> <div class="d8">æž¶æž„</div> <div class="d8"><i class="iconfont icon-salesstructure" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">21/7856</div> </div> <div class="d9"> <div class="d8">订å•</div> <div class="d8"><i class="iconfont icon-auditmanagement" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">27/8592</div> </div> <div class="d9"> <div class="d8">å‘è´§</div> <div class="d8"><i class="el-icon-c-scale-to-original" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">24/4589</div> </div> <div class="d9"> <div class="d8">预留å•</div> <div class="d8"><i class="el-icon-c-scale-to-original" style="font-size: 30px;color: #042a72;font-weight: bold;"></i></div> <div class="d8">32/8692</div> </div> </div> <div style="display: inline-block; width: 750px;"> <div class="d4"></div> <div id="echarts" class="d2" style="width: 750px; height: 208px;"></div> </div> <div class="d3"> <div style="width: 544px; height: 200px;"> <div style="width: 544px; height: 100px;"> </div> <div id="echarts2" class="" style="width: 544px; height: 222px;"></div> </div> </div> </div> <div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;"> <div class="spinner"> <div class="cube1"></div> <div class="cube2"></div> </div> </div> </body> </html>