首页图表做下钻

wangrong

7 天以前 5ebdf612b8291106370bba5e79996b28a7452e67

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

@@ -7,12 +7,29 @@
         <el-row :gutter="10" class="mid-row">
            <el-col :lg="10" :xs="24">
               <panel-card title="可回收物品类占比" sub="同一时间范围，看结构" :demo="isDemoSection('recycleItems')">
                  <v-chart :option="pieOption" autoresize class="chart" />
                  <screen-drill-chart
                     class="chart"
                     type="pie"
                     :source="data.recycleItems"
                     metric="weight"
                     unit="kg"
                     legend
                     :center="['50%', '46%']"
                     :radius="['36%', '60%']"
                     label="{b} {d}%"
                  />
               </panel-card>
            </el-col>
            <el-col :lg="14" :xs="24">
               <panel-card title="各类回收量" sub="横向柱状图更适合长品类名" :demo="isDemoSection('recycleItems')">
                  <v-chart :option="weightOption" autoresize class="chart" />
                  <screen-drill-chart
                     class="chart"
                     type="bar"
                     :source="data.recycleItems"
                     metric="weight"
                     unit="kg"
                     :even-split="false"
                  />
               </panel-card>
            </el-col>
         </el-row>
@@ -35,12 +52,13 @@
import { computed } from 'vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart';
import ScreenDrillChart from '../../components/screen-drill-chart.vue';
import { chartSeries } from '../../data/screen-chart';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data } = useScreenData();
const { isDemoSection } = useScreenFieldSource();
const { textColor, mutedColor, splitColor, primary, tooltip } = useChartTheme();
const { mutedColor, splitColor, primary, tooltip } = useChartTheme();

const kpis = computed(() => [
   { field: 'kpis.periodWeightTon', label: '总量', value: data.value.kpis.periodWeightTon, suffix: '吨', fixed: 2, hint: '全部分类重量合计' },
@@ -50,59 +68,6 @@
   { field: 'kpis.fabricTon', label: '废旧织物', value: data.value.kpis.fabricTon, suffix: '吨', fixed: 2, hint: '可回收子类' }
]);

const pieOption = computed(() => ({
   tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kg') },
   legend: { bottom: 0, textStyle: { color: mutedColor.value } },
   series: [
      {
         type: 'pie',
         radius: ['36%', '60%'],
         center: ['50%', '46%'],
         padAngle: 3,
         itemStyle: { borderRadius: 6 },
         label: { color: textColor.value, formatter: '{b} {d}%' },
         data: toPieData(
            chartSeries(data.value.recycleItems, e => e.weight),
            e => e.name,
            e => e.color
         )
      }
   ]
}));

const weightRows = computed(() =>
   chartSeries(data.value.recycleItems, e => e.weight, { evenSplit: false }).reverse()
);

const weightOption = computed(() => ({
   grid: { containLabel: true, left: 8, right: 28, top: 12, bottom: 8 },
   tooltip: { trigger: 'axis', ...tooltip() },
   xAxis: {
      type: 'value',
      name: 'kg',
      splitLine: { lineStyle: { color: splitColor.value, type: 'dashed' } },
      axisLabel: { color: mutedColor.value },
      axisLine: { show: false },
      axisTick: { show: false }
   },
   yAxis: {
      type: 'category',
      data: weightRows.value.map(e => e.item.name),
      axisLabel: { color: textColor.value },
      axisLine: { show: false },
      axisTick: { show: false }
   },
   series: [
      {
         type: 'bar',
         barWidth: 16,
         data: weightRows.value.map(e => ({
            value: e.value,
            itemStyle: { color: e.item.color, borderRadius: [0, 8, 8, 0] }
         }))
      }
   ]
}));

const valueRows = computed(() =>
   chartSeries(data.value.recycleItems, e => e.value, { evenSplit: false })