echarts交互成功的案例

<template>

  <div>

    <h1>测试echarts</h1>

    <div

      id="main"

      style="float: left; width: 100%; height: 300px; background: #dcdfe6"

    ></div>

  </div>

</template>

<script>

import * as echarts from "echarts";

import axios from 'axios'

export default {

  name: "index",

  data() {

    return {

    };

  },

  mounted() {

    this.statistics();

  },

  methods: {

    statistics() {

        const that = this;

      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById("main"));

        // axios交互数据

         axios.get(

          "接口",

          { headers: { "content-type": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtb2JpbGUiOiIxMzg3NjQ4MjU3MSIsImV4cCI6MTY1MTIzMzQxNn0.K4RKIax6L0oV-ggU4m5s54w4G6FrpSa9aHIeILwnFJQ" } }

        )

        .then((res) => {

          if (res.status === 200) {

             console.log(res.data.data);

            that.arr = [];

            that.qq = [];

            for(var item in res.data.data){

               that.arr.push(res.data.data[item]);

               that.qq.push(item);

           }

           

           console.log('arr',that.arr);

           console.log("打印",that.qq);            

             // 绘制图表

   myChart.setOption({

    title: {

      text: '异步数据加载示例'

    },

    tooltip: {},

    legend: {},

    xAxis: {

      data:that.qq,

    },

    yAxis: {},

    series: [

      {

        name: '销量',

        type: 'bar',

        data:[

          {value:1,name:'ss'},

          {}

        ]

      }

    ]

  });}

        })

        .catch((err) => {});

    },

  },

};

</script>

<style scoped>

#main {

  height: 500px;

  height: 500px;

  /* background-color: orange; */

}

</style>