var myChart = echarts.init(document.getElementById('home-echarts'));
var date = new Date();
//date.setFullYear(2021)
var year = date.getFullYear();
myChart.setOption({
title: {
text: year+'年史志事业部签约金额示意图。'
},
tooltip: {},
legend: {
data:['签约金额','回款金额'],
right:150
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '签约金额',
type: 'bar',
data: []
},
{
name:'回款金额',
type:'bar',
data:[]
}],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
});
var name=[];
var money=[];
var huikuan=[];
this.$http({
url: this.$http.adornUrl('/sys/project/sumMoney'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
for(var i =0;i<data.length;i++){
name.push(data[i].userName);
money.push(data[i].shijijine);
huikuan.push(data[i].amount);
}
console.log(name);
console.log(money);
console.log(huikuan)
myChart.setOption({ //加载数据图表
xAxis: {
data: name,
axisLabel: {
interval:0
}
},
series: [{
// 根据名字对应到相应的系列
name: '签约金额',
data: money,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
},
{
// 根据名字对应到相应的系列
name: '回款金额',
data: huikuan,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
}
],
});
window.onresize = myChart.resize;
})
vue 中echarts 后端数据的处理
最新推荐文章于 2024-05-25 18:16:37 发布