<div id="totalChart" :style="{ height: '360px', width: '100%'}"></div>
getData() {
request.workOrderList().then(({ object }) => {
let category = [], series = []
const xAxisData = object.xItems.map(item => item + '月')
object.groups.forEach(item => {
category.push(item.orderType)
series.push({
name: item.orderType,
data: item.data,
type: 'line',
itemStyle: {
normal: {
lineStyle: {
width: 0.80
}
}
}
})
});
this.initChart(category, xAxisData, series)
})
},
initChart(category, xAxisData, series) {
let chart = this.$echarts.init(document.getElementById('totalChart'));
var option = {
color: ['#6395f9', '#62daab', '#657798', '#f6c022'],
grid: {
top: '3%',
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
bottom: "8%",
data: category,
icon: 'rect',
itemHeight: 2,
itemWidth: 12,
itemGap: 20
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#e6e6e6']
}
}
},
xAxis: {
type: 'category',
data: xAxisData,
axisTick: {
lineStyle: {
color: ['#999']
}
},
axisLine: {
lineStyle: {
color: ['#999']
}
}
},
series: series
};
chart.setOption(option);
window.addEventListener("resize", () => {
chart.resize();
});
},