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