TODO: fix graphPage build*()
This commit is contained in:
parent
6852bc8c85
commit
4c829d21f5
@ -15,33 +15,42 @@ import * as echarts from 'echarts';
|
|||||||
export default {
|
export default {
|
||||||
name: 'LineDataChart',
|
name: 'LineDataChart',
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {
|
||||||
|
xProps: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
inspectionContents: [
|
// inspectionContents: [
|
||||||
'检测内容1',
|
// '检测内容1',
|
||||||
'检测内容2',
|
// '检测内容2',
|
||||||
'检测内容3',
|
// '检测内容3',
|
||||||
'检测内容4',
|
// '检测内容4',
|
||||||
'检测内容5',
|
// '检测内容5',
|
||||||
'检测内容6',
|
// '检测内容6',
|
||||||
'检测内容7',
|
// '检测内容7',
|
||||||
'检测内容8',
|
// '检测内容8',
|
||||||
'检测总数',
|
// '检测总数',
|
||||||
'比例%',
|
// '比例%',
|
||||||
],
|
// ],
|
||||||
xProps: [
|
// xProps: [
|
||||||
'产线1',
|
// '产线1',
|
||||||
'产线2',
|
// '产线2',
|
||||||
'产线3',
|
// '产线3',
|
||||||
'产线4',
|
// '产线4',
|
||||||
'产线5',
|
// '产线5',
|
||||||
'产线6',
|
// '产线6',
|
||||||
'产线7',
|
// '产线7',
|
||||||
'产线8',
|
// '产线8',
|
||||||
'产线9',
|
// '产线9',
|
||||||
],
|
// ],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '检测内容1',
|
name: '检测内容1',
|
||||||
@ -106,6 +115,7 @@ export default {
|
|||||||
this.setOption();
|
this.setOption();
|
||||||
},
|
},
|
||||||
setOption(option) {
|
setOption(option) {
|
||||||
|
console.log("legend", this.legend)
|
||||||
const defaultOption = {
|
const defaultOption = {
|
||||||
// title: {
|
// title: {
|
||||||
// text: '折线图',
|
// text: '折线图',
|
||||||
@ -121,7 +131,7 @@ export default {
|
|||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: this.inspectionContents,
|
data: this.legend,
|
||||||
top: '5%',
|
top: '5%',
|
||||||
icon: 'circle'
|
icon: 'circle'
|
||||||
},
|
},
|
||||||
|
@ -11,8 +11,11 @@
|
|||||||
<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 />
|
<LineGraph
|
||||||
</DetailGraph>
|
:x-props="lineData.xProps"
|
||||||
|
:legend="legend"
|
||||||
|
:series="lineData.list.map(buildSeries)" />
|
||||||
|
</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>
|
||||||
@ -21,7 +24,7 @@
|
|||||||
<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'
|
import LineGraph from './components/graphs/line.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GraphPage',
|
name: 'GraphPage',
|
||||||
@ -31,12 +34,45 @@ export default {
|
|||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
|
lineData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
legend: [],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {},
|
methods: {
|
||||||
|
buildSeries(item) {
|
||||||
|
if (!this.legend.length) this.buildLegend();
|
||||||
|
const data = [];
|
||||||
|
this.legend.forEach((key) => {
|
||||||
|
console.log('key item.key', item, key, item[key]);
|
||||||
|
if (item[key] == null) item[key] = null;
|
||||||
|
data.push(item[key]);
|
||||||
|
});
|
||||||
|
console.log('buildSeries', {
|
||||||
|
name: item.inspectionContent,
|
||||||
|
type: 'line',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
name: item.inspectionContent,
|
||||||
|
type: 'line',
|
||||||
|
data: data,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
buildLegend() {
|
||||||
|
this.legend = this.lineData.list
|
||||||
|
.map((item) => item.inspectionContent)
|
||||||
|
.sort();
|
||||||
|
// this.legend.push('检测总数', '比例%')
|
||||||
|
console.log('buliding legend', this.legend);
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -33,7 +33,10 @@
|
|||||||
</base-table>
|
</base-table>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<GraphPage v-else :summary-list="summaryList" />
|
<GraphPage
|
||||||
|
v-else
|
||||||
|
:summary-list="summaryList"
|
||||||
|
:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
|
||||||
</transition>
|
</transition>
|
||||||
|
|
||||||
<!-- todo: 数据总览,用弹窗包裹的 table 实现 -->
|
<!-- todo: 数据总览,用弹窗包裹的 table 实现 -->
|
||||||
|
Loading…
Reference in New Issue
Block a user