var close = new Vue({ el: '#BeforeCapacity', data: { info: [], chart_inout:'', option_inout : { backgroundColor: "rgba(0,0,100,0.0)", title: { text: '', x: 'center' }, legend: { data: ['Line1', 'Line2', 'Line3', 'Line4'], x: 'center', top: 15, textStyle: {//图例文字的样式 color: '#FFFCFF', fontSize: 16 } }, toolbox: { show: true }, xAxis: { type: 'category', axisPointer: { type: 'shadow' }, data: ['分选', '串焊', '层叠', '层压'], axisLabel: { show: true, textStyle: { color: '#FFFCFF', //更改坐标轴文字颜色 fontSize: 16 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#fff',//左边线的颜色 width: '2'//坐标线的宽度 } }, }, yAxis: { type: 'value', name: '产量', nameTextStyle: { color: "#FFFCFF", fontSize: 20, padding: 10 }, scale: true, axisLabel: { show: true, textStyle: { color: '#FFFCFF', //更改坐标轴文字颜色 fontSize: 20 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#fff',//左边线的颜色 width: '2'//坐标线的宽度 } }, splitLine: { //网格线 lineStyle: { type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线 }, show: true //隐藏或显示 } }, series: [ { name: 'Line1', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 20 } } }, barGap: '50%', barCategoryGap: '30%', data: [0, 0, 0, 0] }, { name: 'Line2', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 20 } } }, itemStyle: { normal: { color: '#68EFF5' } }, barGap: '50%', barCategoryGap: '30%', data: [0, 0, 0, 0] }, { name: 'Line3', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 20 } } }, itemStyle: { normal: { color: '#FAEA88' } }, barGap: '50%', barCategoryGap: '30%', data: [0, 0, 0,0] }, { name: 'Line4', type: 'bar', symbol: 'roundRect', symbolSize: 10, label: { normal: { show: true, position: 'top', formatter: '{c}', textStyle: { //数值样式 //color: 'black', fontSize: 20 } } }, itemStyle: { normal: { color: '#ff9100' } }, barGap: '50%', barCategoryGap: '30%', data: [0, 0, 0, 0] } ] } }, mounted() { var self = this; self.chart_inout = echarts.init(document.getElementById('before')); self.chart_inout.clear(); self.chart_inout.setOption(self.option_inout); setTimeout(function () { window.onresize = function () { self.chart_inout.resize(); } }, 200) var h = document.documentElement.clientHeight; console.log(h); var height = (h - 90); console.log(height); $('#before').css("height", height + "px"); self.chart_inout.resize(); $(window).resize(function () { var h = parseInt($(window).height()); var height = (h - 130); console.log(height); $('#before').css("height", height + "px"); self.chart_inout.resize(); //改变图表大小 }) self.fun_update(); //获取数据 self.fun_time(); setInterval(self.fun_update, 60000); setInterval(self.fun_time, 1000); }, methods: { fun_time: function () { var self = this; $("#time").html(self.getTime()); }, getTime:function() { //获取时间 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); //这样写显示时间在1~9会挤占空间;所以要在1~9的数字前补零; if(hour < 10) { hour = '0' + hour; } if(minute < 10) { minute = '0' + minute; } if(second < 10) { second = '0' + second; } var x = date.getDay();//获取星期 var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second return time; }, fun_update: function () { var self = this; execute(); async function execute() { try { let result = await self.FetchApi("BeforeCapacity", {}); result = await result.json(); console.log(result); var chart_option = self.chart_inout.getOption(); for (var i = 1; i <= 4; i++) { self.option_inout.series[i - 1].data = [0,0,0,0] $.each(result, function (ind, row) { if (row.line_id == i) { if (row.process_code == '分选') chart_option.series[i - 1].data[0] = row.qty; if (row.process_code == 'M10') chart_option.series[i - 1].data[1] = row.qty; if (row.process_code == 'M15') chart_option.series[i - 1].data[2] = row.qty; if (row.process_code == 'N30') chart_option.series[i - 1].data[3] = row.qty; } }); } self.chart_inout.setOption(chart_option); } catch (err) { console.log(err); } } //$.post("/SQL/GetDataFromSqlTextByDsID", //{ // datasourceid: "10001", // sql: sql_update //}, function (result) { // var chart_option = chart_inout.getOption(); // for (var i = 1; i <= 3; i++) { // $.each(result, function (ind, row) { // if (row.LINE == i) { // if (row.STEP == '分选') chart_option.series[i - 1].data[0] = row.T; // if (row.STEP == '串焊') chart_option.series[i - 1].data[1] = row.T; // if (row.STEP == '层叠') chart_option.series[i - 1].data[2] = row.T; // if (row.STEP == '层压') chart_option.series[i - 1].data[3] = row.T; // } // }); // } // chart_inout.setOption(chart_option); //}, 'json'); }, //请求数据方法 requestApi: function (config) {//modulename, funname, para, success, fail) { fetch("/api/" + config.modulename + "/" + config.funname + "", { method: "post", headers: { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, body: JSON.stringify(config.para) }).then( (res) => { return res.json() } ).then( (res) => { config.success(res) } ).catch( (ex) => { config.fail(ex) } ) }, FetchApi: function (funname, para) { return fetch("/api/BeforeCapacity/" + funname + "", { method: "post", headers: { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, body: JSON.stringify(para) }) } } })