1.methods定义方法实例化Echarts

 methods: {

//定义方法
    async getHistogram() {
      const echart = Echart.init(this.$refs.effect)

//实例化Echarts
      echart.setOption({
        color: ["#5ab1ef", "#c8b6eb", "#2ec7c9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 图表边界控制
        grid: {
          // 距离 上右下左 的距离
          left: "0%",
          right: "2%",
          bottom: "0%",
          top: "10%",
          // 是否包含文本
          containLabel: true,

          //grid 四条边框的颜色
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              // true意思：图形在刻度中间
              // false意思：图形在刻度之间
              alignWithLabel: true,
            },
            // x坐标轴颜色设置
            axisLine: {
              lineStyle: {
                color: "rgba(0, 138, 205, 1)",
                // width:8,  x轴线的粗细
                // opcity: 0,   如果不想显示x轴线 则改为 0
              },
            },
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#4c9bfd",
            },
            // y坐标轴颜色设置
            axisLine: {
              show: true, //显示y轴线
              lineStyle: {
                color: "rgba(0, 138, 205, 0.3)",
                width: 2,
              },
            },
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            stack: "Ad",

            data: [], //数据清空
          },
          {
            name: "Email",
            type: "bar",
            stack: "Ad",

            data: [],
          },
          {
            name: "Union Ads",
            type: "bar",

            stack: "Ad",

            data: [], //数据清空

          },
        ],
      })

  },

2. 发送请求后去后台数据,给Echarts赋值

 methods: {
    async getHistogram() {

     ....省略

      const { data } = await getHistogramApi()
      console.log(data)
      echart.setOption({
        series: [
          {
            name: "Direct",
            type: "bar",
            stack: "Ad",

            data: data[0].value,
          },
          {
            name: "Email",
            type: "bar",
            stack: "Ad",

            data: data[1].value,
          },
          {
            name: "Union Ads",
            type: "bar",

            stack: "Ad",

            data: data[2].value,
          },
        ],
      })
    },
  },

3. mounted里执行

 mounted() {
    this.getHistogram()
  },