|
@@ -10,7 +10,6 @@
|
|
|
inited: false,
|
|
inited: false,
|
|
|
loading: false,
|
|
loading: false,
|
|
|
report: null,
|
|
report: null,
|
|
|
- mode: 'text', // text | interactive
|
|
|
|
|
from: '',
|
|
from: '',
|
|
|
to: '',
|
|
to: '',
|
|
|
schools: [],
|
|
schools: [],
|
|
@@ -71,10 +70,6 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="ops-multi" id="rpSchool"></div>
|
|
<div class="ops-multi" id="rpSchool"></div>
|
|
|
<div class="ops-multi" id="rpShop"></div>
|
|
<div class="ops-multi" id="rpShop"></div>
|
|
|
- <div class="rp-tabs" id="rpTabs">
|
|
|
|
|
- <button type="button" data-mode="text" class="on">图文报告</button>
|
|
|
|
|
- <button type="button" data-mode="interactive">交互报告</button>
|
|
|
|
|
- </div>
|
|
|
|
|
<div class="rp-actions">
|
|
<div class="rp-actions">
|
|
|
<button type="button" class="btn btn-ghost btn-small" id="rpArchive">历史报告</button>
|
|
<button type="button" class="btn btn-ghost btn-small" id="rpArchive">历史报告</button>
|
|
|
<button type="button" class="btn btn-ghost btn-small" id="rpSave" disabled>保存报告</button>
|
|
<button type="button" class="btn btn-ghost btn-small" id="rpSave" disabled>保存报告</button>
|
|
@@ -92,14 +87,6 @@
|
|
|
<div class="modal-body" id="rpHistoryList"></div>
|
|
<div class="modal-body" id="rpHistoryList"></div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>`;
|
|
</div>`;
|
|
|
- root.querySelectorAll('#rpTabs [data-mode]').forEach((btn) => {
|
|
|
|
|
- btn.addEventListener('click', () => {
|
|
|
|
|
- state.mode = btn.dataset.mode;
|
|
|
|
|
- root.querySelectorAll('#rpTabs [data-mode]').forEach((b) => b.classList.toggle('on', b === btn));
|
|
|
|
|
- $('rpPage').classList.toggle('interactive', state.mode === 'interactive');
|
|
|
|
|
- if (state.report) drawCharts(state.report);
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
$('rpFrom').addEventListener('change', (e) => { state.from = String(e.target.value || '').replace(/-/g, ''); load(true); });
|
|
$('rpFrom').addEventListener('change', (e) => { state.from = String(e.target.value || '').replace(/-/g, ''); load(true); });
|
|
|
$('rpTo').addEventListener('change', (e) => { state.to = String(e.target.value || '').replace(/-/g, ''); load(true); });
|
|
$('rpTo').addEventListener('change', (e) => { state.to = String(e.target.value || '').replace(/-/g, ''); load(true); });
|
|
|
$('rpRefresh').addEventListener('click', () => load(true));
|
|
$('rpRefresh').addEventListener('click', () => load(true));
|
|
@@ -262,16 +249,15 @@
|
|
|
|
|
|
|
|
// ---------- 图表 ----------
|
|
// ---------- 图表 ----------
|
|
|
|
|
|
|
|
- function chartBase(interactive) {
|
|
|
|
|
|
|
+ function chartBase() {
|
|
|
return {
|
|
return {
|
|
|
- animation: !interactive,
|
|
|
|
|
- silent: !interactive,
|
|
|
|
|
- tooltip: interactive ? { trigger: 'axis' } : undefined,
|
|
|
|
|
|
|
+ animation: true,
|
|
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function drawCharts(report) {
|
|
function drawCharts(report) {
|
|
|
- const interactive = state.mode === 'interactive';
|
|
|
|
|
|
|
+
|
|
|
const byId = new Map((report.charts || []).map((c) => [c.id, c]));
|
|
const byId = new Map((report.charts || []).map((c) => [c.id, c]));
|
|
|
Object.values(state.charts).forEach((chart) => chart && chart.dispose());
|
|
Object.values(state.charts).forEach((chart) => chart && chart.dispose());
|
|
|
state.charts = {};
|
|
state.charts = {};
|
|
@@ -288,7 +274,7 @@
|
|
|
if (trend) {
|
|
if (trend) {
|
|
|
const chart = mount(trend);
|
|
const chart = mount(trend);
|
|
|
chart && chart.setOption({
|
|
chart && chart.setOption({
|
|
|
- ...chartBase(interactive),
|
|
|
|
|
|
|
+ ...chartBase(),
|
|
|
grid: { left: 56, right: 48, top: 24, bottom: 30 },
|
|
grid: { left: 56, right: 48, top: 24, bottom: 30 },
|
|
|
legend: { right: 0, top: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 11 } },
|
|
legend: { right: 0, top: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 11 } },
|
|
|
xAxis: { type: 'category', data: trend.data.map((d) => d.date.slice(4)), axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e0da' } } },
|
|
xAxis: { type: 'category', data: trend.data.map((d) => d.date.slice(4)), axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e0da' } } },
|
|
@@ -305,7 +291,7 @@
|
|
|
const rows = rank.data.slice().reverse();
|
|
const rows = rank.data.slice().reverse();
|
|
|
const chart = mount(rank);
|
|
const chart = mount(rank);
|
|
|
chart && chart.setOption({
|
|
chart && chart.setOption({
|
|
|
- ...chartBase(interactive),
|
|
|
|
|
|
|
+ ...chartBase(),
|
|
|
grid: { left: 8, right: 60, top: 10, bottom: 10, containLabel: true },
|
|
grid: { left: 8, right: 60, top: 10, bottom: 10, containLabel: true },
|
|
|
xAxis: { type: 'value', splitLine: { lineStyle: { color: '#f2efea' } } },
|
|
xAxis: { type: 'value', splitLine: { lineStyle: { color: '#f2efea' } } },
|
|
|
yAxis: { type: 'category', data: rows.map((r) => r.shopName), axisTick: { show: false }, axisLine: { show: false }, axisLabel: { width: 140, overflow: 'truncate', fontSize: 11 } },
|
|
yAxis: { type: 'category', data: rows.map((r) => r.shopName), axisTick: { show: false }, axisLine: { show: false }, axisLabel: { width: 140, overflow: 'truncate', fontSize: 11 } },
|
|
@@ -318,7 +304,7 @@
|
|
|
const f = funnel.data;
|
|
const f = funnel.data;
|
|
|
const chart = mount(funnel);
|
|
const chart = mount(funnel);
|
|
|
chart && chart.setOption({
|
|
chart && chart.setOption({
|
|
|
- ...chartBase(interactive),
|
|
|
|
|
|
|
+ ...chartBase(),
|
|
|
series: [{
|
|
series: [{
|
|
|
type: 'funnel', left: '10%', right: '10%', top: 12, bottom: 12, minSize: '30%', gap: 3,
|
|
type: 'funnel', left: '10%', right: '10%', top: 12, bottom: 12, minSize: '30%', gap: 3,
|
|
|
label: { show: true, position: 'inside', color: '#fff', fontSize: 11, formatter: (p) => `${p.name} ${Number(p.value).toLocaleString('zh-CN')}` },
|
|
label: { show: true, position: 'inside', color: '#fff', fontSize: 11, formatter: (p) => `${p.name} ${Number(p.value).toLocaleString('zh-CN')}` },
|
|
@@ -333,7 +319,7 @@
|
|
|
if (structure) {
|
|
if (structure) {
|
|
|
const chart = mount(structure);
|
|
const chart = mount(structure);
|
|
|
chart && chart.setOption({
|
|
chart && chart.setOption({
|
|
|
- ...chartBase(interactive),
|
|
|
|
|
|
|
+ ...chartBase(),
|
|
|
grid: { left: 56, right: 20, top: 28, bottom: 30 },
|
|
grid: { left: 56, right: 20, top: 28, bottom: 30 },
|
|
|
legend: { right: 0, top: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 11 } },
|
|
legend: { right: 0, top: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 11 } },
|
|
|
xAxis: { type: 'category', data: structure.data.map((d) => d.date.slice(4)), axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e0da' } } },
|
|
xAxis: { type: 'category', data: structure.data.map((d) => d.date.slice(4)), axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e0da' } } },
|