test #47
@ -23,7 +23,11 @@ export default {
|
|||||||
legend: {
|
legend: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
}
|
},
|
||||||
|
series: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -51,72 +55,33 @@ export default {
|
|||||||
// '产线8',
|
// '产线8',
|
||||||
// '产线9',
|
// '产线9',
|
||||||
// ],
|
// ],
|
||||||
series: [
|
// series: [
|
||||||
{
|
// {
|
||||||
name: '检测内容1',
|
// name: 'a',
|
||||||
type: 'line',
|
// type: 'line',
|
||||||
data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
|
// data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '检测内容2',
|
// name: 'lkj',
|
||||||
type: 'line',
|
// type: 'line',
|
||||||
data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
|
// data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '检测内容3',
|
// name: '测试11',
|
||||||
type: 'line',
|
// type: 'line',
|
||||||
data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
|
// data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '检测内容4',
|
// name: '测试22',
|
||||||
type: 'line',
|
// type: 'line',
|
||||||
data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
|
// 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: {},
|
computed: {
|
||||||
mounted() {
|
config() {
|
||||||
this.init();
|
return {
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
|
|
||||||
this.setOption();
|
|
||||||
},
|
|
||||||
setOption(option) {
|
|
||||||
console.log("legend", this.legend)
|
|
||||||
const defaultOption = {
|
|
||||||
// title: {
|
// title: {
|
||||||
// text: '折线图',
|
// text: '折线图',
|
||||||
// },
|
// },
|
||||||
@ -133,7 +98,7 @@ export default {
|
|||||||
legend: {
|
legend: {
|
||||||
data: this.legend,
|
data: this.legend,
|
||||||
top: '5%',
|
top: '5%',
|
||||||
icon: 'circle'
|
icon: 'circle',
|
||||||
},
|
},
|
||||||
// toolbox: {
|
// toolbox: {
|
||||||
// feature: {
|
// feature: {
|
||||||
@ -148,9 +113,30 @@ export default {
|
|||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
},
|
},
|
||||||
series: this.series
|
series: this.series,
|
||||||
};
|
};
|
||||||
this.chart.setOption(defaultOption);
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
config(val) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.init();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setOption();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setOption() {
|
||||||
|
this.chart.setOption(this.config);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -11,10 +11,7 @@
|
|||||||
<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 :x-props="lineData.xProps" :legend="legend" :series="series" />
|
||||||
:x-props="lineData.xProps"
|
|
||||||
:legend="legend"
|
|
||||||
:series="lineData.list.map(buildSeries)" />
|
|
||||||
</DetailGraph>
|
</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" /> -->
|
||||||
@ -42,35 +39,40 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
legend: [],
|
legend: [],
|
||||||
|
series: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
mounted() {
|
||||||
|
this.buildLegend();
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.series = this.lineData.list.map(this.buildSeries);
|
||||||
|
console.log('this.series', this.series);
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buildSeries(item) {
|
buildSeries(item) {
|
||||||
if (!this.legend.length) this.buildLegend();
|
console.log('this.list', this.lineData.list, this.lineData.xProps);
|
||||||
const data = [];
|
const seriesItem = {
|
||||||
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,
|
name: item.inspectionContent,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: data,
|
data: [],
|
||||||
});
|
|
||||||
return {
|
|
||||||
name: item.inspectionContent,
|
|
||||||
type: 'line',
|
|
||||||
data: data,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.lineData.xProps.forEach((prop) => {
|
||||||
|
if (prop in item) {
|
||||||
|
seriesItem.data.push(item[prop]);
|
||||||
|
} else {
|
||||||
|
seriesItem.data.push(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return seriesItem;
|
||||||
},
|
},
|
||||||
buildLegend() {
|
buildLegend() {
|
||||||
this.legend = this.lineData.list
|
this.legend = this.lineData.list
|
||||||
.map((item) => item.inspectionContent)
|
.map((item) => item.inspectionContent)
|
||||||
.sort();
|
.sort();
|
||||||
// this.legend.push('检测总数', '比例%')
|
|
||||||
console.log('buliding legend', this.legend);
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user