129 lines
2.3 KiB
Vue
129 lines
2.3 KiB
Vue
<template>
|
||
<div
|
||
:id="'currentDataChart' + chartN"
|
||
style="width: 100%; height: 300px"></div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import resize from '@/utils/chartMixins/resize';
|
||
export default {
|
||
name: 'BaseChart',
|
||
mixins: [resize],
|
||
data() {
|
||
return {
|
||
chartDom: '',
|
||
chart: '',
|
||
};
|
||
},
|
||
props: {
|
||
chartData: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
lineName: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
chartN: {
|
||
type: Number,
|
||
required: true,
|
||
default: () => {
|
||
return 0;
|
||
},
|
||
},
|
||
},
|
||
watch: {
|
||
chartData: function () {
|
||
this.getChart();
|
||
},
|
||
},
|
||
mounted() {
|
||
this.getChart();
|
||
},
|
||
methods: {
|
||
getChart() {
|
||
if (
|
||
this.chart !== null &&
|
||
this.chart !== '' &&
|
||
this.chart !== undefined
|
||
) {
|
||
this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||
}
|
||
this.chartDom = document.getElementById('currentDataChart' + this.chartN);
|
||
this.chart = echarts.init(this.chartDom);
|
||
if (this.chartData.length === 0) {
|
||
return false;
|
||
}
|
||
console.log('chartData:', this.chartData);
|
||
console.log('lineName:', this.lineName);
|
||
let xData = this.chartData.map((item) => {
|
||
return item.inspectionContent;
|
||
});
|
||
console.log('xData:', xData);
|
||
let series = [];
|
||
this.lineName.map((item) => {
|
||
let obj = {
|
||
data: [],
|
||
type: 'bar',
|
||
stack: 'a',
|
||
barWidth: 20,
|
||
name: item.prop,
|
||
};
|
||
this.chartData.forEach((ele) => {
|
||
obj.data.push(ele[item.prop]);
|
||
});
|
||
series.push(obj);
|
||
});
|
||
console.log('series:', series);
|
||
var option = {
|
||
color: [
|
||
'#288AFF',
|
||
'#73DE93',
|
||
'#FFCE6A',
|
||
'#63BDFF',
|
||
'#7164FF',
|
||
'#FF6860',
|
||
'#FF9747',
|
||
'#B0EB42',
|
||
'#D680FF',
|
||
'#0043D2',
|
||
],
|
||
legend: {
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
textStyle: {
|
||
color: '#8c8c8c',
|
||
},
|
||
right: 0,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: 20,
|
||
right: 0,
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: series,
|
||
};
|
||
|
||
option && this.chart.setOption(option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|