折线图显示
image.png
数据结构
[
{
"countTime": "2:00",
"doneCount": 1,
"todoCount": 0
},
{
"countTime": "4:00",
"doneCount": 0,
"todoCount": 0
},
{
"countTime": "6:00",
"doneCount": 0,
"todoCount": 0
},
{
"countTime": "8:00",
"doneCount": 1,
"todoCount": 0
},
{
"countTime": "10:00",
"doneCount": 0,
"todoCount": 0
}
]
handleSetMonitorChart() {
this.monitorChart = echarts.init(this.$refs.monitorChart)
this.monitorChart.setOption({
title: {
text: '单据处理报表'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['待处理', '已处理'],
icon: "circle",
right: "5%",
align: "left",
itemGap: 50,
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
symbolKeepAspect: false,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.xData.map(item=>item.countTime)
},
yAxis: {
axisTick: {
show: false,
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F7F9'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000000a6',//字体颜色
fontSize: 12 //字体大小
}
},
type: 'value',
minInterval: 1 , // 只显示整数
},
series: [
{
name: '待处理',
type: 'line',
data: this.xData.map(item=>item.todoCount)
},
{
name: '已处理',
type: 'line',
data: this.xData.map(item=>item.doneCount)
}
],
color: ['#1495EB', '#00CC66']
})
},
截图
image.png
image.png
handleSetMonitorChart(documentType) {
let legendData=[]
let dataList=[]
let falgSeleted={} //主要是这个参数一定写上
if(documentType == "exceptionOrder"){//异常单只有待处理的数据
legendData=['待处理'];
dataList=[{
name: '待处理',
type: 'line',
data: this.xData.map(item=>item.todoCount)
}]
falgSeleted={
'待处理':true,
'已处理':false,
}
}else{
legendData=['待处理', '已处理'];
dataList=[{
name: '待处理',
type: 'line',
data: this.xData.map(item=>item.todoCount)
},{
name: '已处理',
type: 'line',
data: this.xData.map(item=>item.doneCount)
}]
falgSeleted={
'待处理':true,
'已处理':true,
}
}
this.monitorChart = echarts.init(this.$refs.monitorChart)
this.monitorChart.setOption({
title: {
text: '单据处理报表'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: legendData,
icon: "circle",
right: "5%",
align: "left",
itemGap: 50,
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
symbolKeepAspect: false,
selected:falgSeleted //是否隐藏那个折线
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.xData.map(item=>item.countTime)
},
yAxis: {
axisTick: {
show: false,
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F7F9'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000000a6',//字体颜色
fontSize: 12 //字体大小
}
},
type: 'value',
minInterval: 1 , // 只显示整数
},
series: dataList,
color: ['#1495EB', '#00CC66']
})
},