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

叁歲伎倆 2022-10-05 05:55 102阅读 0赞

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>