Vue使用echars echars数据通过springboot提供

vue安装echars命令

npm install echarts --save

在main.js使用echars

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts 

<template>
    <div class="asd">
        <div id="myChart" :style="{width: '500px', height: '300px'}"></div>
    </div>
  
</template>
<script>

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      xdata:["体育教育", "学前教育", "软件工程", "会计学", "物流管理"],
      ydata: [],
      pdata:[]
    }
  },
  mounted() {
    this.getAll();
    // this.drawLine();
  },
  methods: {
    getAll(){
         this.$http
            .get("http://localhost:8088/getAll")
            .then((res => {
            if(res.data.status){
                const data = res.data.data
                data.forEach(item => {
                    const arr = []
                    for(let d in item){
                        // arr.push(item[d])    
                        this.ydata=arr
                        this.ydata.push(item[d])    
                    }
                    console.log("在test1函数中X轴"+this.xdata);
                    console.log("在test1函数中y轴"+this.ydata);
                    this.drawLine();
                })
           }else{
             console.log("失败");
           }

        }));
    },
    drawLine() {
              console.log("x的数据是"+this.xdata);
              console.log("y的数据是"+this.ydata);
     
      let myChart = echarts.init(document.getElementById('myChart'))

      myChart.setOption({
        title: { text: '各专业报考人数' },
        tooltip: {},
        xAxis: {
        //   data: ["软件工程", "学前教育", "会计学", "物流管理", "体育教育"]
            data:this.xdata
        },
        yAxis: {},
        series: [{
          name: '报考人数',
          type: 'bar',
          data: this.ydata
        }]
      });
    }
  }
}

</script>
<style scoped>
    .asd{
        text-align:center;
    }
</style>