add line chart
This commit is contained in:
parent
c755ecc105
commit
6852bc8c85
@ -37,6 +37,8 @@ export default {
|
|||||||
border: 1px solid #cfcfcf;
|
border: 1px solid #cfcfcf;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title > span {
|
.title > span {
|
||||||
@ -45,4 +47,9 @@ export default {
|
|||||||
background: rgba(20, 145, 210, 0.155);
|
background: rgba(20, 145, 210, 0.155);
|
||||||
border-left: 4px solid rgba(20, 145, 210);
|
border-left: 4px solid rgba(20, 145, 210);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
// background-color: aquamarine;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -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>
|
@ -10,7 +10,9 @@
|
|||||||
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
|
||||||
<TotalGraph :summary-list="summaryList" />
|
<TotalGraph :summary-list="summaryList" />
|
||||||
</DetailGraph>
|
</DetailGraph>
|
||||||
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
|
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
|
||||||
|
<LineGraph />
|
||||||
|
</DetailGraph>
|
||||||
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
|
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
|
||||||
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
|
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
|
||||||
</div>
|
</div>
|
||||||
@ -19,10 +21,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import DetailGraph from './components/detailGraph.vue';
|
import DetailGraph from './components/detailGraph.vue';
|
||||||
import TotalGraph from './components/graphs/total.vue';
|
import TotalGraph from './components/graphs/total.vue';
|
||||||
|
import LineGraph from './components/graphs/line.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GraphPage',
|
name: 'GraphPage',
|
||||||
components: { DetailGraph, TotalGraph },
|
components: { DetailGraph, TotalGraph, LineGraph },
|
||||||
props: {
|
props: {
|
||||||
summaryList: {
|
summaryList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
Loading…
Reference in New Issue
Block a user