1、从后台获取数据,在methods里面定义
getMonthContractCount() {
this.$api.getMonthContractCount().then(res => {
if (res && res.data && res.data.code == '0') {
let info = res.data.data
//有两条数据,有个templateName,对应的有两个series
if (info.length > 0) {
let month = info[0].list.map(item => item.month)
let name = info.map(item => item.templateName)
this.drawContractaddChart(info, month, name)
}
}
})
},
2、在created里面
created() {
this.getMonthContractCount();
},
3、在methods里面定义画echarts方法
drawContractaddChart(dataList, month, name) {
const myChart = echarts.init(document.getElementById('addContract-chart'));
myChart.setOption({
grid: { //调整图表上下左右位置
top: '20%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
legend: {
data: name,
itemHeight: 8,
itemWidth: 16,
icon: 'roundRect',
textStyle: {
color: '#999'
},
top: '0px',
right: '10px'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: month,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#C2C2C2'
}
},
axisLabel: {
show: true,
interval: 0,
rotate: 0,
},
},
yAxis: {
type: 'value',
minInterval: 1,
axisLine: {
lineStyle: {
color: '#C2C2C2'
}
}
},
series: (function() {
let colorArr = [
['#98E9FB ', '#00D2FF'],
['#A6C2FB ', '#4E87FA'],
['#fd9e40', '#FB9633 '],
];
var series = [];
for (var i = 0; i < dataList.length; i++) {
var item = {
name: dataList[i].templateName,
type: "bar",
barWidth: 15,
itemStyle: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorArr[i][0]
},
{
offset: 1,
color: colorArr[i][1]
}
])
},
data: dataList[i].list.map(item2 => item2.contractCount)
};
series.push(item);
}
return series;
})(),
});
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},