之前看了比较多的 echart 要么写的假数据 要么照抄的别人的 ; 前提:安装了axios 安装了echart 安装步骤比较多 我是yarn add echart 安装方法看官网 下面是我的写法:不多说 直接代码
data() {
return{
parames:{
//这里放你的参数 如果其他地方的参数有变化直接改变这里的参数 然后再调用 this.echartsData() 即可
},
learningTime:{
data:[],
date:[],
},
locabulary:{
data:[],
legend:[],
series:[],
},
}
},
mounted() {
this.echartsData(); //里面可以将多个echart图要获取的数据放在此函数中
}, menthods:{
echartsData() { //放更多函数可以
this.getLearningLocabulary();
this.getLearningTime();
},
getLearningLocabulary() {
this.axios.POST('/census/censusWord',this.parames).then((res) => {
//你可以对数据进行一些数据的清洗 变成你想要的参数
if (res && res.data ) {
this.locabulary.data = res.data.data;
this.locabulary.legend = res.data.legend;
this.locabulary.series = res.data.series;
}else{
this.locabulary.data = [];
this.locabulary.legend = [];
this.locabulary.series = [];
}
this.echartsInit1(this.locabulary.legend,this.locabulary.data,this.locabulary.series)
})
.catch((err) => {
this.locabulary.data = [];
this.locabulary.legend = [];
this.locabulary.series = [];
this.echartsInit1(this.locabulary.legend,this.locabulary.data,this.locabulary.series);
console.log(err, 'err');
})
},
getLearningTime() {
this.POST('/census/censusTime',this.parames).then((res) => {
if (res && res.data ) {
this.learningTime.data = res.data.data;
this.learningTime.date = res.data.date;
}else{
this.learningTime.data = [];
this.learningTime.date = [];
}
console.log(this.learningTime)
this.echartsInit(this.learningTime.date,this.learningTime.data )
})
.catch((err) => {
this.learningTime.data = [];
this.learningTime.date = [];
console.log(this.learningTime)
this.echartsInit(this.learningTime.date,this.learningTime.data )
console.log(err, 'err')
})
},
echartsInit (date,data) {
let myChartTime = this.$echarts.init(this.$refs.censusTimeBox);
myChartTime.setOption(
{
title: {text: '本周学习时长'},
tooltip: {},
xAxis: {
type: 'category',
data: date
},
yAxis: {},
series:[{
data: data,
type: 'bar'
}],
});
},
echartsInit1(legend,data,series) {
let myChartWord = this.$echarts.init(this.$refs.censusWordBox);
myChartWord.setOption({
title: {
text: '本周学习单词量',
// subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:legend //legend
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data//横坐标data
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 个'
}
},
series: series
});
},
}
以上 是个人的开发实践 肯定会有有更好的 更简单的 若有 可直接联系
