| | |
| | |  |
| | |  |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | |
| | | border-radius: 6px; |
| | | padding: 8px; |
| | | flex: 1; |
| | | overflow: hidden; |
| | | overflow: auto; |
| | | min-height: 0; |
| | | } |
| | | |
| | | .chart-row { |
| | | display: flex; |
| | | height: 100%; |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); |
| | | gap: 8px; |
| | | } |
| | | |
| | | .chart-box { |
| | | flex: 1; |
| | | margin: 4px; |
| | | border: 1px solid #eee; |
| | | border-radius: 4px; |
| | | background: #fafbfc; |
| | | position: relative; |
| | | min-height: 260px; |
| | | display: flex; |
| | | align-items: stretch; |
| | | justify-content: stretch; |
| | | } |
| | | |
| | | .empty-tip { |
| | |
| | | for (var key in ChartConfig) { chartConfigKeys.push(key); } |
| | | generateSummaryCards(); |
| | | generateChartBoxes(); |
| | | calculateHeights(); |
| | | } |
| | | function generateSummaryCards() { |
| | | var $summaryRow = $('#summaryRow'); $summaryRow.empty(); |
| | |
| | | }); |
| | | } |
| | | function generateChartBoxes() { |
| | | var $c = $('#chartContainer'); $c.empty(); var cols = 4; |
| | | var rows = Math.ceil(chartConfigKeys.length / cols); |
| | | for (let r = 0; r < rows; r++) { |
| | | var $row = $('<div class="chart-row"></div>'); |
| | | for (let col = 0; col < cols; col++) { |
| | | var i = r * cols + col; |
| | | if (i < chartConfigKeys.length) { |
| | | var key = chartConfigKeys[i]; |
| | | $row.append(`<div class="chart-box" id="chart-${key}"><div class="empty-tip">ææ æ°æ®</div></div>`); |
| | | } else { |
| | | $row.append('<div class="chart-box" style="visibility:hidden;"></div>'); |
| | | } |
| | | } |
| | | $c.append($row); |
| | | } |
| | | } |
| | | function calculateHeights() { |
| | | var rows = Math.ceil(chartConfigKeys.length / 4); |
| | | $('.chart-row').css('height', (100 / rows) + '%'); |
| | | var $c = $('#chartContainer'); $c.empty(); |
| | | chartConfigKeys.forEach(key => { |
| | | $c.append(`<div class="chart-box" id="chart-${key}"><div class="empty-tip">ææ æ°æ®</div></div>`); |
| | | }); |
| | | } |
| | | |
| | | //æ¥è¯¢ |
| | |
| | | var dom = $chartBox[0]; |
| | | var chartKey = 'chart-' + key; |
| | | |
| | | // 1. 鿝æ§å®ä¾ï¼æ¸
ç©ºå®¹å¨ |
| | | // 1. 鿝æ§å®ä¾ï¼æå¼ ResizeObserver å¹¶æ¸
ç©ºå®¹å¨ |
| | | if (chartInstances[chartKey]) { |
| | | try { |
| | | if (chartInstances[chartKey]._resizeObserver) chartInstances[chartKey]._resizeObserver.disconnect(); |
| | | } catch (e) { } |
| | | chartInstances[chartKey].dispose(); |
| | | delete chartInstances[chartKey]; |
| | | } |
| | |
| | | |
| | | var chart = echarts.init(dom); |
| | | chartInstances['chart-' + key] = chart; |
| | | // èªå¨ååºå®¹å¨å°ºå¯¸ååï¼ä¼å
ä½¿ç¨ ResizeObserverï¼ |
| | | if (window.ResizeObserver) { |
| | | try { |
| | | var ro = new ResizeObserver(function () { try { chart.resize(); } catch (e) { } }); |
| | | ro.observe(dom); |
| | | chart._resizeObserver = ro; |
| | | } catch (e) { } |
| | | } |
| | | |
| | | // è®¡ç®æ»å |
| | | var total = data.reduce((s, x) => s + x.value, 0); |
| | |
| | | var dom = document.getElementById('chart-' + key); |
| | | var chart = echarts.init(dom); |
| | | chartInstances['chart-' + key] = chart; |
| | | if (window.ResizeObserver) { |
| | | try { |
| | | var ro = new ResizeObserver(function () { try { chart.resize(); } catch (e) { } }); |
| | | ro.observe(dom); |
| | | chart._resizeObserver = ro; |
| | | } catch (e) { } |
| | | } |
| | | var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']; |
| | | |
| | | chart.setOption({ |