首页图表做下钻

wangrong

7 天以前 5ebdf612b8291106370bba5e79996b28a7452e67

 src/modules/report/views/screen/overview.vue

@@ -10,7 +10,16 @@
               <template #extra>
                  <cl-select-button v-model="mixMetric" :options="mixOptions" small />
               </template>
               <v-chart :option="mixOption" autoresize class="chart" />
               <screen-drill-chart
                  class="chart"
                  type="pie"
                  :source="data.wasteMix"
                  :metric="mixMetric"
                  :unit="mixUnit"
                  legend
                  :center="['50%', '46%']"
                  :radius="['38%', '62%']"
               />
            </panel-card>
         </el-col>
         <el-col :lg="10" :xs="24">
@@ -52,7 +61,7 @@
import PanelCard from '../../components/panel-card.vue';
import ScreenCameraPreview from '../../components/screen-camera-preview.vue';
import { TIME_RANGE_OPTIONS } from '../../data/screen';
import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import ScreenDrillChart from '../../components/screen-drill-chart.vue';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data, timeRange } = useScreenData();
@@ -88,25 +97,11 @@
   { field: 'kpis.totalParticipants', label: '累计参与人数', value: data.value.kpis.totalParticipants, suffix: '人', fixed: 0, hint: '去重校园用户' }
]);

const mixOption = computed(() => ({
   tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() },
   legend: { bottom: 0, textStyle: { color: mutedColor.value } },
   series: [
      {
         type: 'pie',
         radius: ['38%', '62%'],
         center: ['50%', '46%'],
         padAngle: 3,
         itemStyle: { borderRadius: 6 },
         label: { color: textColor.value, formatter: '{b}\n{d}%' },
         data: toPieData(
            chartSeries(data.value.wasteMix, e => e[mixMetric.value]),
            e => e.name,
            e => e.color
         )
      }
   ]
}));
const mixUnit = computed(() => {
   if (mixMetric.value === 'value') return '元';
   if (mixMetric.value === 'count') return '次';
   return 'kg';
});

const trendHint = computed(() => {
   const map = { today: '近 7 日', week: '按日', month: '按日', quarter: '按日', year: '按月' };