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>