LoongPanel-Asp/web/components/Charts/BarChart.vue

<script lang="ts" setup>
import {useDataStore} from "~/strores/DataStore";

import type {PropType} from "vue";
import VChart, {THEME_KEY} from 'vue-echarts';

const dataStore = useDataStore()

const props = defineProps({
  valueIds: {
    type: Array as PropType<string[]>,
    required: true,
  },
  valueNames: {
    type: Array as PropType<string[]>,
    required: true,
  }

})
const option = computed(() => {
  return {
    backgroundColor:'',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisTick: {
          alignWithLabel: true
        },
        data: props.valueNames
      }
    ],
    legend: {
      data: props.valueNames,
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },

        saveAsImage: {}
      }
    },
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [{
      name: '数据',
      type: 'bar',
      barWidth: '60%',
      data: props.valueIds?.map((id) => {
        return dataStore.data[id]
      }),
    }]
  }
});
</script>

<template>
  <v-chart :option="option" autoresize class="chart" :theme="$colorMode.value"/>
</template>