首页图表做下钻

wangrong

7 天以前 5ebdf612b8291106370bba5e79996b28a7452e67

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

@@ -12,7 +12,17 @@
            </el-col>
            <el-col :lg="10" :xs="24">
               <panel-card title="碳减排来源" sub="按可回收子类拆分" :demo="isDemoSection('recycleItems')">
                  <v-chart :option="sourceOption" autoresize class="chart" />
                  <screen-drill-chart
                     class="chart"
                     type="pie"
                     :source="data.recycleItems"
                     metric="carbon"
                     unit="kgCO₂e"
                     name-suffix="回收"
                     legend
                     :center="['50%', '46%']"
                     :radius="['36%', '60%']"
                  />
               </panel-card>
            </el-col>
         </el-row>
@@ -46,12 +56,12 @@
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.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();
const { isDemoSection } = useScreenFieldSource();
const { textColor, mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();
const { mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();

const rangeLabel = computed(
   () => TIME_RANGE_OPTIONS.find(e => e.value === timeRange.value)?.label || '本区间'
@@ -127,25 +137,6 @@
   ]
}));

const sourceOption = computed(() => ({
   tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kgCO₂e') },
   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}\n{d}%' },
         data: toPieData(
            chartSeries(data.value.recycleItems, e => e.carbon, { carbon: true }),
            e => e.name + '回收',
            e => e.color
         )
      }
   ]
}));
</script>

<style lang="scss" scoped>