|
|
@@ -0,0 +1,154 @@ |
|
|
|
<!-- |
|
|
|
filename: line.vue |
|
|
|
author: liubin |
|
|
|
date: 2023-08-07 16:14:11 |
|
|
|
description: |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div ref="line-chart" class="line-chart"></div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'LineDataChart', |
|
|
|
components: {}, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chart: null, |
|
|
|
inspectionContents: [ |
|
|
|
'检测内容1', |
|
|
|
'检测内容2', |
|
|
|
'检测内容3', |
|
|
|
'检测内容4', |
|
|
|
'检测内容5', |
|
|
|
'检测内容6', |
|
|
|
'检测内容7', |
|
|
|
'检测内容8', |
|
|
|
'检测总数', |
|
|
|
'比例%', |
|
|
|
], |
|
|
|
xProps: [ |
|
|
|
'产线1', |
|
|
|
'产线2', |
|
|
|
'产线3', |
|
|
|
'产线4', |
|
|
|
'产线5', |
|
|
|
'产线6', |
|
|
|
'产线7', |
|
|
|
'产线8', |
|
|
|
'产线9', |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '检测内容1', |
|
|
|
type: 'line', |
|
|
|
data: [120, 132, 101, 134, 90, 230, 210, 120, 132], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测内容2', |
|
|
|
type: 'line', |
|
|
|
data: [220, 182, 191, 234, 290, 330, 310, 220, 182], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测内容3', |
|
|
|
type: 'line', |
|
|
|
data: [150, 232, 201, 154, 190, 330, 410, 150, 232], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测内容4', |
|
|
|
type: 'line', |
|
|
|
data: [320, 332, 301, 334, 390, 330, 320, 332, 301], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测内容5', |
|
|
|
type: 'line', |
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测内容6', |
|
|
|
type: 'line', |
|
|
|
data: [920, 932, 901, 934, 1290, 1330, 1320, 932, 901], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测内容7', |
|
|
|
type: 'line', |
|
|
|
data: [1020, 932, 901, 934, 1290, 1330, 1320, 932, 901], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测内容8', |
|
|
|
type: 'line', |
|
|
|
data: [1120, 932, 901, 934, 1290, 1330, 1320, 932, 901], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '检测总数', |
|
|
|
type: 'line', |
|
|
|
data: [1220, 932, 901, 934, 1290, 1330, 1320, 932, 901], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '比例%', |
|
|
|
type: 'line', |
|
|
|
data: [1320, 932, 901, 934, 1290, 1330, 1320, 932, 901], |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
mounted() { |
|
|
|
this.init(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init() { |
|
|
|
if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']); |
|
|
|
this.setOption(); |
|
|
|
}, |
|
|
|
setOption(option) { |
|
|
|
const defaultOption = { |
|
|
|
// title: { |
|
|
|
// text: '折线图', |
|
|
|
// }, |
|
|
|
grid: { |
|
|
|
top: '24%', |
|
|
|
left: '3%', |
|
|
|
right: '5%', |
|
|
|
bottom: '5%', |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: this.inspectionContents, |
|
|
|
top: '5%', |
|
|
|
icon: 'circle' |
|
|
|
}, |
|
|
|
// toolbox: { |
|
|
|
// feature: { |
|
|
|
// saveAsImage: {}, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: this.xProps, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
}, |
|
|
|
series: this.series |
|
|
|
}; |
|
|
|
this.chart.setOption(defaultOption); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.line-chart { |
|
|
|
// background: #f3f3f3; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
</style> |