vue3 - 封装图表组件

把相同或者类似的图表进行封装

父组件使用：

<Report
        :info="main4"
        :xdata="RXData4"
        :sdata="RSData4"
        :title="title4"
        :color="color4"
        :barBorderRadius="barBorderRadius4"
        class="div"
      ></Report>

　　引入组件

1	`import Report` `from` `"@/components/Report/index";`

　　定义变量

const data = reactive({
  RXData4: [],
  RSData4: [],
});
const title4 = ref("重点应用单位");
const color4 = ref(["#9FF6F6", "#00E3E6"]);
const barBorderRadius4 = ref([5, 5, 0, 0]);
const main4 = ref("main4");
const {
  RXData4,
  RSData4,
} = toRefs(data);

然后自己从接口里面取数据给RXData4和RSData4填充数据

ps：我页面组件使用了setup语法糖

子组件：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<template>
  <div :id="info"></div>
</template>
 
<script setup>
import * as echarts from "echarts";
const props = defineProps({
  info: String, //dom的id
  title: String,
  xdata: {
    type: Array,
    default: [],
  },
  sdata: {
    type: Array,
    default: [],
  },
  barBorderRadius: {
    type: Array,
    default: [],
  },
  color: {
    type: Array,
    default: [],
  },
});
 
const { info, title, xdata, sdata, barBorderRadius, color } = toRefs(props);
 
watch(
  sdata,
  (newData, oldData) => {
    nextTick(() => {
      initReport();
    });
  },
  { immediate: true, deep: true }
);
function initReport() {
  const myChart = echarts.init(document.getElementById(info.value));
  const option = {
    title: {
      text: title.value,
      left: "center",
      padding: [40, 10],
      textStyle: {
        color: "#fff",
        fontWeight: "lighter",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis", //控制鼠标移入是否有提示信息
      axisPointer: {
        type: "line",
      },
    },
    grid: {
      top: "30%",
      left: "5%",
      right: "5%",
      bottom: "6%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisTick: {
        show: true,
      },
      splitLine: {
        lineStyle: {
          color: "#666",
        },
      },
      axisLabel: {
        interval: 0,
        rotate: 25,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
      data: xdata.value,
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: true,
      },
      splitLine: {
        lineStyle: {
          color: "#666",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        data: sdata.value,
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            // barBorderRadius: [5, 5, 0, 0],
            barBorderRadius: barBorderRadius.value,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: color.value[0], // 0% 处的颜色
              },
              {
                offset: 1,
                color: color.value[1], // 100% 处的颜色
              },
            ]),
          },
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>
<style>
</style>