<template> <card :header="props.title" class="card-nopx card1-nopx"> <div class="chart-box-nopx"> <barChart :echartData="echartData" yAxisName="数量" ref="barChartRef" :legend="{ show: false }" :grid="{ left: '3%', right: '7%', top: '15%', bottom: '3%', containLabel: true, }" :refresh="refresh" event="selectchanged" @selectchanged-callback="onSelectchanged" v-if="echartData.xAxisData.length" /> </div> </card> <card header="表格数据" class="card-nopx card2-nopx" v-if="isSelect"> <new-table class="table-nopx" :data="tableData" :columns="columns" :loading="loading" :max-height="300" /> </card> </template> <script setup> import { watch, computed } from 'vue'; import barChart from '@/components/EchartsZH/barChart.vue'; const props = defineProps({ title: { type: String, default: '项目年径流总量控制率评价统计', }, data: { type: Array, default: () => [], }, }); const refresh = ref(0); const colorMap = new Map([ [0, '#5470c6'], [1, '#91cc75'], [2, '#fac858'], [3, '#73c0de'], ]); const echartData = computed(() => { return { xAxisData: props.data.map(item => item.name), seriesData: [ { type: 'bar', name: '项目个数', colorBy: 'data', selectedMode: 'single', barWidth: 30, data: props.data.map((item, i) => ({ ...item, itemStyle: { color: colorMap.get(i), }, })), }, ], }; }); const loading = ref(false); const tableData = ref([ { name1: 'xxxx', name2: 'xxxx', name3: 'xxxx', name4: 'xxxx', }, ]); const columns = [ { prop: 'name1', label: 'name1', }, { prop: 'name2', label: 'name2', }, { prop: 'name3', label: 'name3', }, { prop: 'name4', label: 'name4', }, ]; const isSelect = ref(false); watch( () => props.title, () => { refresh.value++; } ); const onSelectchanged = data => { console.log(data); isSelect.value = data.params.fromAction === 'select'; }; </script> <style lang="scss" scoped> .card-nopx { position: absolute; right: 10px; z-index: 10; &.card1-nopx { top: 10px; } &.card2-nopx { top: 365px; } .chart-box-nopx { width: 420px; height: 260px; } .table-nopx { width: 420px; } } </style>