查看放大的一个例子
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/> </head> <body style="height: 100%; margin: 0"> <div id="app" style="height: 100%; margin: 0"> <button type="button" class="layui-btn" @click="btn_chartsLarge">查看放大</button> <div id="main" style="height: 60%;width: 60%"></div> {{ message }} </div> <script src="https://www.layuicdn.com/layui/layui.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript"> /** * 转成 echarts的数据集合，type: bar柱形和 line 折线 * @param data * @returns {{source: *[], dimensions: [string]}} */ var toDatasetData = function (data) { return Object.entries(data).reduce(function (acc, [date, items], idx) { items.forEach(function (item, index) { if (idx == 0) { (acc.source[idx] || (acc.source[idx] = ['type']))[index + 1] = item.equipment; } (acc.source[idx+1] || (acc.source[idx+1] = [date]))[index + 1] = item.value; }); return acc; }, { source: [] //表头 数据 }) }; var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' , myChart: {}// echarts 对象 }, mounted() {// vue 初始化事件 //获取数据的方法 var res = {"success": true, "message": "操作成功！", "code": 200, "result": {"09/07": [{"equipmentId": "1", "value": "0.09", "equipment": "PLC3与PLC1之间"}, {"equipmentId": "2", "value": "0", "equipment": "PLC3与PLC2之间"}, {"equipmentId": "3", "value": "0.01", "equipment": "PLC3与AGV之间"}, {"equipmentId": "4", "value": "0.03", "equipment": "PLC3与MES之间"}], "09/08": [{"equipmentId": "1", "value": "0.05", "equipment": "PLC3与PLC1之间"}, {"equipmentId": "2", "value": "0.09", "equipment": "PLC3与PLC2之间"}, {"equipmentId": "3", "value": "0.04", "equipment": "PLC3与AGV之间"}, {"equipmentId": "4", "value": "0.06", "equipment": "PLC3与MES之间"}], "09/09": [{"equipmentId": "1", "value": "0.09", "equipment": "PLC3与PLC1之间"}, {"equipmentId": "2", "value": "0.06", "equipment": "PLC3与PLC2之间"}, {"equipmentId": "3", "value": "0.01", "equipment": "PLC3与AGV之间"}, {"equipmentId": "4", "value": "0.03", "equipment": "PLC3与MES之间"}], "09/10": [{"equipmentId": "1", "value": "0.05", "equipment": "PLC3与PLC1之间"}, {"equipmentId": "2", "value": "0.09", "equipment": "PLC3与PLC2之间"}, {"equipmentId": "3", "value": "0.04", "equipment": "PLC3与AGV之间"}, {"equipmentId": "4", "value": "0.06", "equipment": "PLC3与MES之间"}], "09/11": [{"equipmentId": "1", "value": "0.09", "equipment": "PLC3与PLC1之间"}, {"equipmentId": "2", "value": "0.06", "equipment": "PLC3与PLC2之间"}, {"equipmentId": "3", "value": "0.01", "equipment": "PLC3与AGV之间"}, {"equipmentId": "4", "value": "0.03", "equipment": "PLC3与MES之间"}], "09/12": [{"equipmentId": "1", "value": "0.05", "equipment": "PLC3与PLC1之间"}, {"equipmentId": "2", "value": "0.09", "equipment": "PLC3与PLC2之间"}, {"equipmentId": "3", "value": "0.04", "equipment": "PLC3与AGV之间"}, {"equipmentId": "4", "value": "0.06", "equipment": "PLC3与MES之间"}], "09/13": [{"equipmentId": "1", "value": "0.09", "equipment": "PLC3与PLC1之间"}, {"equipmentId": "2", "value": "0", "equipment": "PLC3与PLC2之间"}, {"equipmentId": "3", "value": "0.01", "equipment": "PLC3与AGV之间"}, {"equipmentId": "4", "value": "0.03", "equipment": "PLC3与MES之间"}]}, "timestamp": 1631517224233} var data = res.result this.init_myChart(data); }, methods: { init_myChart: function (data) { // 初始化 echarts 图表方法 var that = this; var chartDom = document.getElementById('main'); that.myChart = echarts.init(chartDom); var dataset = toDatasetData(data); var option = { dataset: dataset, legend: {}, toolbox: { feature: { myFull: { show: true, title: '全屏查看', icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', onclick: function (e){ var opts = e.getOption() opts.toolbox[0].feature.myFull.show=false that.open_chartsLarge(opts,'放大') } } } }, tooltip: {}, xAxis: [ { type: 'category', axisTick: {show: false}, } ], // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。 xAxis: { type: 'category' }, // 声明一个 Y 轴，数值轴。 yAxis: {}, // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。 series: new Array(dataset.source[0].length - 1).fill({ type: 'line', /* bar 是柱形 ，line 是折线*/ barGap: 0, emphasis: { focus: 'series' }, }) }; option && that.myChart.setOption(option); }, open_chartsLarge: function (option, title) { // 查看echarts图表大图方法 //页面层 layui.layer.open({ type: 1, skin: 'layui-layer-rim', //加上边框 title: title || '', maxmin: true, area: ['80%', '80%'], //宽高 id: 'chartsLarge',//弹窗的 echarts id openChart: {},//弹窗的 echarts 对象 success: function (layero) { //隐藏滚动条 layero.find('.layui-layer-content').css('overflow', 'hidden') this.openChart = echarts.init(document.getElementById(this.id)); option && this.openChart.setOption(option); }, full: function () { //最大化 this.openChart.resize(); }, min: function () { //最小化 this.openChart.resize(); }, restore: function () { //还原 this.openChart.resize(); }, resizing: function () { //监听窗口拉伸动作 this.openChart.resize(); } }); }, btn_chartsLarge: function () { var that = this; // 查询放大按钮 var myOption = that.myChart.getOption(); that.open_chartsLarge(myOption, '标题'); } } }) </script> </body> </html>
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（1）
查看放大的一个例子
