echart简单封装（适合饼图、柱状图、折线）

<template>
  <div style="width: 100%" class="echart">
    <div :id="main" style="width: 90%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "com-echarts",
  props: {
    radius: {
      typeof: Object,
      default: function () {
        return ["0%", "70%"];
      },
    },
    seriesDate: {
      typeof: Array,
      default: function () {
        return [];
      },
    },
    main: {
      typeof: String,
      default: function () {
        return "main";
      },
    },
    color: {
      typeof: Array,
      default: function () {
        return ["#6699FF", "#A1E6CE", "#52CCA3", "#B3CDFF", "#7D8FB3"];
      },
    },
    xAxisDate: {
      typeof: Array,
      default: function () {
        return [];
      },
    },
    //bar柱状 pie扇形 line折线
    type: {
      type: String,
      default: "pie",
    },
    title: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      myChart: "",
      list: [],
      pieData: {
        grid: {
          top: 20,
          bottom: "20%",
          left: 0,
          right: "80%",
        },
        title: {
          text: this.title,
          bottom: 0,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          //    formatter: function(parms) {
          //        console.log(parms);
          //     let html = `${parms.value}`;
          //     return html;
          //   }, //自定义悬浮窗内容
        },
        color: this.color, //自定义饼图颜色
        legend: {
          show: false,
          orient: "vertical",
          icon: "circle",
          right: 40,
          top: 0,
          bottom: 0,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 16,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: this.radius,
            data: this.seriesDate,
            itemStyle: {
              normal: {}, //给饼图每一块之间加个白色分割线
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },

            label: {
              show: true,
              position: "left",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      barDate: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: this.title,
          bottom: 0,
          left: "center",
        },
        xAxis: {
          type: "category",
          data: this.xAxisDate,
        },
        color: this.color, //自定义饼图颜色
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.seriesDate,
            type: "bar",
          },
        ],
      },
      lineDate: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: this.title,
          bottom: 0,
          left: "center",
        },
        xAxis: {
          type: "category",
          data: this.xAxisDate,
        },
        color: this.color, //自定义颜色
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.seriesDate,
            type: "line",
          },
        ],
      },
    };
  },
  mounted() {
    this.myChartdata();
  },
  watch: {
    seriesDate: function (val) {
      console.log(this.type);
      if (this.type == "pie") {
        this.myChart.clear();
        this.pieData.series[0].data = val;
        this.myChart.setOption(this.pieData, true);
      } else if (this.type == "bar") {
        this.myChart.clear();
        this.barDate.series[0].data = val;
        this.myChart.setOption(this.barDate, true);
      }else if (this.type == "line") {
        this.myChart.clear();
        this.lineDate.series[0].data = val;
        this.myChart.setOption(this.lineDate, true);
      }
    },
  },
  methods: {
    myChartdata() {
      console.log(this.type);
      this.myChart = echarts.init(document.getElementById(this.main));
      if (this.type == "pie") {
        // 指定图表的配置项和数据
        var option = this.pieData;
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(this.pieData);
      } else if (this.type == "bar") {
        var option = this.barDate;
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(this.barDate);
      } else if (this.type == "line") {
        var option = this.lineDate;
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(this.lineDate);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echart {
  height: 38vh;
}
</style>

<Echart1
          ref="echart1"
          :main="'main1'"
          :seriesDate="genderNumberRespList"
          :color="['#6699FF', '#52CCA3']"
          :type="'bar'"
          :title="'条形1'"
          :xAxisDate="[1, 2, 3, 4, 5, 6]"
        ></Echart1>

  <Echart1
          ref="echart2"
          :main="'main2'"
          :seriesDate="genderNumberRespList"
          :radius="['40%', '70%']"
          :color="['#6699FF', '#52CCA3']"
          :type="'pie'"
          :title="'扇形2'"
        ></Echart1>


  <Echart1
          ref="echart3"
          :main="'main3'"
          :seriesDate="genderNumberRespList"
          :color="['#6699FF', '#52CCA3']"
          :type="'line'"
          :title="'折线'"
        ></Echart1>