foster-pc-vue/src/components/charts/barChart.vue

<template>
  <div ref="chartDom" class="charts"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { barOption } from "./option/barOption.js";

const props = defineProps ({
  styleName: {
    type: String,
    default: "styleName1",
  },
});

let chartDom = ref(null);
let myChart = null;
const options = ref(null);

const initData = () => {
  barOption[props.styleName].xAxis.data = ["正常", "较大", "异常"];
  barOption[props.styleName].series[0].data = [33, 41, 43];
  options.value = barOption[props.styleName];
  myChart.setOption(options.value);
};

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  initData();
});
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>