| | |
| | | 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 { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen'; |
| | | |
| | | const { data } = useScreenData(); |
| | |
| | | ]); |
| | | |
| | | const pieOption = computed(() => ({ |
| | | tooltip: { trigger: 'item', formatter: '{b}<br/>{c} kg ({d}%)', ...tooltip() }, |
| | | tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter('kg') }, |
| | | legend: { bottom: 0, textStyle: { color: mutedColor.value } }, |
| | | series: [ |
| | | { |
| | |
| | | padAngle: 3, |
| | | itemStyle: { borderRadius: 6 }, |
| | | label: { color: textColor.value, formatter: '{b} {d}%' }, |
| | | data: data.value.recycleItems.map(e => ({ |
| | | name: e.name, |
| | | value: e.weight, |
| | | itemStyle: { color: e.color } |
| | | })) |
| | | 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 }, |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'category', |
| | | data: data.value.recycleItems.map(e => e.name).reverse(), |
| | | data: weightRows.value.map(e => e.item.name), |
| | | axisLabel: { color: textColor.value }, |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false } |
| | |
| | | { |
| | | type: 'bar', |
| | | barWidth: 16, |
| | | data: data.value.recycleItems |
| | | .map(e => ({ value: e.weight, itemStyle: { color: e.color, borderRadius: [0, 8, 8, 0] } })) |
| | | .reverse() |
| | | 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 }) |
| | | ); |
| | | |
| | | const valueOption = computed(() => ({ |
| | | grid: { containLabel: true, left: 16, right: 16, top: 28, bottom: 8 }, |
| | | tooltip: { trigger: 'axis', ...tooltip() }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: data.value.recycleItems.map(e => e.name), |
| | | data: valueRows.value.map(e => e.item.name), |
| | | axisLabel: { color: mutedColor.value }, |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false } |
| | |
| | | { |
| | | type: 'bar', |
| | | barWidth: 28, |
| | | data: data.value.recycleItems.map(e => e.value), |
| | | data: valueRows.value.map(e => e.value), |
| | | itemStyle: { color: primary.value, borderRadius: [6, 6, 0, 0] } |
| | | } |
| | | ] |