先上封装好的组件
代码语言：html复制<template>
<div class='multi-wrapper'>
<div class='chart-wrapper' ref='chartMonitor' :style="{height: height}">
<vue-chart ref='chart' :option='optionChart' autoresize v-if='!isEmpty' resize ></vue-chart>
</div>
</div>
</template>
<script>
export default {
name: 'LineChartMulti',
props: {
chartData: {
type: Array,
default: () => []
},
legendPosition: {
type: String,
default: () => 'left'
},
legendColor: {
type: String,
default: () => '#666666'
},
markLine: {
type: Object,
default: () => null
},
type: {
type: Array,
default: () => []
},
height:{
type: String,
default: '300px'
}
},
data() {
return {
xAxisConfig: [],
yAxisConfig: [],
legend: [],
series: [],
isEmpty: false,
gridMargin: '10%'
}
},
methods: {
updateGridMargin() {
if (window.innerWidth > 576) {
this.gridMargin = '100';
} else {
this.gridMargin = '30';
}
},
// 单位拆分成二维数组
arrChange(num, arr) {
const newArr = [];
while(arr.length > 0) {
newArr.push(arr.splice(0, num));
}
return newArr;
},
handleWatchPropsUpdate(oldVal) {
if(!oldVal || JSON.stringify(oldVal) === '[]') {
this.isEmpty=true
}else{
this.isEmpty=false
}
oldVal=oldVal.filter(innerArray => innerArray.length > 0)
function generateArray(n) {
let arr = [];
for (let i = 0; i < n; i ) {
arr.push(i);
}
return arr;
}
if(typeof this.$refs['chart'] !== 'undefined'){
this.$refs['chart'].clear()
}
const xData = (oldVal[0] || []).map((item) => {
return `${item['day']}`
})
this.xAxisConfig = {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: '#90A3FF',
}
},
axisTick: {
show: true
},
axisLabel: {
show: true,
color: '#90A3FF'
},
data: xData
}
const chartDataLen = oldVal.length
const median = Math.floor((chartDataLen-1)/2)
this.gridMargin = (median 1)*45
const yLeftNum = Math.floor(chartDataLen/2) (chartDataLen%2)
const yLeftIndexKey = generateArray(yLeftNum)
this.yAxisConfig = oldVal.map((item, index) => {
const position = yLeftIndexKey.includes(index) ? 'left' : 'right'
return {
name : `${(Array.isArray(item) && item.length > 0 && item[0]['unit']) || '-'}`,
nameTextStyle: {
color: '#999999',
fontSize: 12
},
type : 'value',
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: ['#ccc']
}
},
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: '#90A3FF',
}
},
axisTick: {
show: true
},
axisLabel: {
show: true,
color: '#90A3FF'
},
position,
offset: index <= median ? Math.abs(median-index)*50 : Math.abs(index-median-1)*50
}
})
const legendData = (oldVal && oldVal.map((item, index) => {
return (Array.isArray(item) && item.length> 0 && item[0]['name']) || '-'
})) || []
this.legend = {
data: legendData,
x: this.legendPosition,
textStyle: {
color: this.legendColor
}
}
this.series = oldVal.map((item, index) => {
const yAxisIndex = index
const data = item.map(val => {
return Number(val['val']).toFixed(2)
})
const unit = (Array.isArray(item) && item.length > 0 && item[0]['unit']) || '-';
const markLine = {
silent: true,
lineStyle: {
normal: {
color: '#A60000' // 这儿设置安全基线颜色
}
},
data: [{
yAxis: (this.markLine && this.markLine.val) || 0
}],
label: {
normal: {
formatter: (this.markLine && this.markLine.name ) || '' // 这儿设置安全基线
}
}
}
if(this.type.length>0) {
return {
name: (Array.isArray(item) && item.length> 0 && item[0]['name']) || '-',
type: this.type[index],
yAxisIndex,
data,
barWidth: this.type[index] === 'bar' ? 10 : undefined,
markLine:this.markLine && Object.keys(this.markLine).includes('name') && Object.keys(this.markLine).includes('val') && index===chartDataLen-1 ? markLine : {},
smooth: true,
unit // 添加单位信息
}
}else{
return {
name: (Array.isArray(item) && item.length> 0 && item[0]['name']) || '-',
type:'line',
yAxisIndex,
data,
markLine:this.markLine && Object.keys(this.markLine).includes('name') && Object.keys(this.markLine).includes('val') && index===chartDataLen-1 ? markLine : {},
smooth: true,
unit // 添加单位信息
}
}
})
}
},
computed: {
optionChart({ xAxisConfig,yAxisConfig, legend, series, gridMargin}) {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true,
type: "shadow"
},
formatter: function(params) {
if(Array.isArray(params)) {
let result = params[0].name '<br/>'
params.forEach((item) => {
const unit = series[item.seriesIndex].unit;
result =`${item['marker']} ${item['seriesName']} : ${parseFloat(item['value']).toFixed(2)} ${unit} <br />`
})
return result
}
}
},
legend,
axisPointer:{
link: {xAxisIndex: 'all'}
},
grid:{
left: gridMargin,
right: gridMargin,
top: 70,
bottom: 70
},
dataZoom:[
{
show: true,
realtime: true,
height: 10,
start: 0,
end: 100,
xAxisIndex: [0, 1]
},
{
type: 'inside',
realtime: true,
height: 10,
start: 0,
end: 100,
xAxisIndex: [0, 1]
}
],
xAxis: xAxisConfig,
yAxis: yAxisConfig,
series
}
}
},
mounted() {
// this.updateGridMargin()
// window.addEventListener('resize', this.updateGridMargin);
},
watch: {
chartData: {
handler: 'handleWatchPropsUpdate',
immediate:true,
deep: true
}
}
}
</script>
<style lang='less' scoped>
.multi-wrapper{
height: 100%;
.chart-wrapper{
width: 100%;
}
}
</style>参数解释：
- 父组件传递的props： chartData 为二维数组
const chartData = [
[
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-01",
"name": "变量4016",
"day": "2024-06-01"
},
{
"val": "87.92",
"unit": "NTU",
"hour": "2024-06-02",
"name": "变量4016",
"day": "2024-06-02"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-03",
"name": "变量4016",
"day": "2024-06-03"
},
{
"val": "87.92",
"unit": "NTU",
"hour": "2024-06-04",
"name": "变量4016",
"day": "2024-06-04"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-05",
"name": "变量4016",
"day": "2024-06-05"
},
{
"val": "87.56",
"unit": "NTU",
"hour": "2024-06-06",
"name": "变量4016",
"day": "2024-06-06"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-07",
"name": "变量4016",
"day": "2024-06-07"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-08",
"name": "变量4016",
"day": "2024-06-08"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-11",
"name": "变量4016",
"day": "2024-06-11"
},
{
"val": "86.50",
"unit": "NTU",
"hour": "2024-06-12",
"name": "变量4016",
"day": "2024-06-12"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-13",
"name": "变量4016",
"day": "2024-06-13"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-14",
"name": "变量4016",
"day": "2024-06-14"
},
{
"val": "87.86",
"unit": "NTU",
"hour": "2024-06-15",
"name": "变量4016",
"day": "2024-06-15"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-16",
"name": "变量4016",
"day": "2024-06-16"
},
{
"val": "87.92",
"unit": "NTU",
"hour": "2024-06-17",
"name": "变量4016",
"day": "2024-06-17"
},
{
"val": "86.16",
"unit": "NTU",
"hour": "2024-06-18",
"name": "变量4016",
"day": "2024-06-18"
},
{
"val": "82.54",
"unit": "NTU",
"hour": "2024-06-19",
"name": "变量4016",
"day": "2024-06-19"
},
{
"val": "83.39",
"unit": "NTU",
"hour": "2024-06-20",
"name": "变量4016",
"day": "2024-06-20"
},
{
"val": "86.09",
"unit": "NTU",
"hour": "2024-06-21",
"name": "变量4016",
"day": "2024-06-21"
},
{
"val": "88.00",
"unit": "NTU",
"hour": "2024-06-22",
"name": "变量4016",
"day": "2024-06-22"
},
{
"val": "86.10",
"unit": "NTU",
"hour": "2024-06-23",
"name": "变量4016",
"day": "2024-06-23"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-06-24",
"name": "变量4016",
"day": "2024-06-24"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-06-25",
"name": "变量4016",
"day": "2024-06-25"
},
{
"val": "84.92",
"unit": "NTU",
"hour": "2024-06-26",
"name": "变量4016",
"day": "2024-06-26"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-06-27",
"name": "变量4016",
"day": "2024-06-27"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-06-28",
"name": "变量4016",
"day": "2024-06-28"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-06-29",
"name": "变量4016",
"day": "2024-06-29"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-06-30",
"name": "变量4016",
"day": "2024-06-30"
},
{
"val": "84.91",
"unit": "NTU",
"hour": "2024-07-01",
"name": "变量4016",
"day": "2024-07-01"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-02",
"name": "变量4016",
"day": "2024-07-02"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-03",
"name": "变量4016",
"day": "2024-07-03"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-04",
"name": "变量4016",
"day": "2024-07-04"
},
{
"val": "84.92",
"unit": "NTU",
"hour": "2024-07-05",
"name": "变量4016",
"day": "2024-07-05"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-06",
"name": "变量4016",
"day": "2024-07-06"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-07",
"name": "变量4016",
"day": "2024-07-07"
},
{
"val": "87.53",
"unit": "NTU",
"hour": "2024-07-08",
"name": "变量4016",
"day": "2024-07-08"
},
{
"val": "87.91",
"unit": "NTU",
"hour": "2024-07-09",
"name": "变量4016",
"day": "2024-07-09"
},
{
"val": "86.89",
"unit": "NTU",
"hour": "2024-07-10",
"name": "变量4016",
"day": "2024-07-10"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-11",
"name": "变量4016",
"day": "2024-07-11"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-12",
"name": "变量4016",
"day": "2024-07-12"
},
{
"val": "84.92",
"unit": "NTU",
"hour": "2024-07-13",
"name": "变量4016",
"day": "2024-07-13"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-14",
"name": "变量4016",
"day": "2024-07-14"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-15",
"name": "变量4016",
"day": "2024-07-15"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-16",
"name": "变量4016",
"day": "2024-07-16"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-17",
"name": "变量4016",
"day": "2024-07-17"
},
{
"val": "84.92",
"unit": "NTU",
"hour": "2024-07-18",
"name": "变量4016",
"day": "2024-07-18"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-19",
"name": "变量4016",
"day": "2024-07-19"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-20",
"name": "变量4016",
"day": "2024-07-20"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-21",
"name": "变量4016",
"day": "2024-07-21"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-22",
"name": "变量4016",
"day": "2024-07-22"
},
{
"val": "84.85",
"unit": "NTU",
"hour": "2024-07-23",
"name": "变量4016",
"day": "2024-07-23"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-25",
"name": "变量4016",
"day": "2024-07-25"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-26",
"name": "变量4016",
"day": "2024-07-26"
},
{
"val": "84.92",
"unit": "NTU",
"hour": "2024-07-27",
"name": "变量4016",
"day": "2024-07-27"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-28",
"name": "变量4016",
"day": "2024-07-28"
},
{
"val": "85.00",
"unit": "NTU",
"hour": "2024-07-29",
"name": "变量4016",
"day": "2024-07-29"
},
{
"val": "84.89",
"unit": "NTU",
"hour": "2024-07-30",
"name": "变量4016",
"day": "2024-07-30"
},
{
"val": "80.00",
"unit": "NTU",
"hour": "2024-07-31",
"name": "变量4016",
"day": "2024-07-31"
},
{
"val": "79.84",
"unit": "NTU",
"hour": "2024-08-01",
"name": "变量4016",
"day": "2024-08-01"
}
],
[
{
"val": "0.26",
"unit": "m",
"hour": "2024-06-01",
"name": "变量5004",
"day": "2024-06-01"
},
{
"val": "0.26",
"unit": "m",
"hour": "2024-06-02",
"name": "变量5004",
"day": "2024-06-02"
},
{
"val": "0.22",
"unit": "m",
"hour": "2024-06-03",
"name": "变量5004",
"day": "2024-06-03"
},
{
"val": "0.24",
"unit": "m",
"hour": "2024-06-04",
"name": "变量5004",
"day": "2024-06-04"
},
{
"val": "0.29",
"unit": "m",
"hour": "2024-06-05",
"name": "变量5004",
"day": "2024-06-05"
},
{
"val": "0.26",
"unit": "m",
"hour": "2024-06-06",
"name": "变量5004",
"day": "2024-06-06"
},
{
"val": "0.20",
"unit": "m",
"hour": "2024-06-07",
"name": "变量5004",
"day": "2024-06-07"
},
{
"val": "0.29",
"unit": "m",
"hour": "2024-06-08",
"name": "变量5004",
"day": "2024-06-08"
},
{
"val": "0.24",
"unit": "m",
"hour": "2024-06-11",
"name": "变量5004",
"day": "2024-06-11"
},
{
"val": "0.37",
"unit": "m",
"hour": "2024-06-12",
"name": "变量5004",
"day": "2024-06-12"
},
{
"val": "0.20",
"unit": "m",
"hour": "2024-06-13",
"name": "变量5004",
"day": "2024-06-13"
},
{
"val": "0.29",
"unit": "m",
"hour": "2024-06-14",
"name": "变量5004",
"day": "2024-06-14"
},
{
"val": "0.24",
"unit": "m",
"hour": "2024-06-15",
"name": "变量5004",
"day": "2024-06-15"
},
{
"val": "0.21",
"unit": "m",
"hour": "2024-06-16",
"name": "变量5004",
"day": "2024-06-16"
},
{
"val": "0.22",
"unit": "m",
"hour": "2024-06-17",
"name": "变量5004",
"day": "2024-06-17"
},
{
"val": "0.24",
"unit": "m",
"hour": "2024-06-18",
"name": "变量5004",
"day": "2024-06-18"
},
{
"val": "0.19",
"unit": "m",
"hour": "2024-06-19",
"name": "变量5004",
"day": "2024-06-19"
},
{
"val": "0.23",
"unit": "m",
"hour": "2024-06-20",
"name": "变量5004",
"day": "2024-06-20"
},
{
"val": "0.19",
"unit": "m",
"hour": "2024-06-21",
"name": "变量5004",
"day": "2024-06-21"
},
{
"val": "0.22",
"unit": "m",
"hour": "2024-06-22",
"name": "变量5004",
"day": "2024-06-22"
},
{
"val": "0.20",
"unit": "m",
"hour": "2024-06-23",
"name": "变量5004",
"day": "2024-06-23"
},
{
"val": "0.20",
"unit": "m",
"hour": "2024-06-24",
"name": "变量5004",
"day": "2024-06-24"
},
{
"val": "0.39",
"unit": "m",
"hour": "2024-06-25",
"name": "变量5004",
"day": "2024-06-25"
},
{
"val": "1.02",
"unit": "m",
"hour": "2024-06-26",
"name": "变量5004",
"day": "2024-06-26"
},
{
"val": "0.78",
"unit": "m",
"hour": "2024-06-27",
"name": "变量5004",
"day": "2024-06-27"
},
{
"val": "1.43",
"unit": "m",
"hour": "2024-06-28",
"name": "变量5004",
"day": "2024-06-28"
},
{
"val": "2.24",
"unit": "m",
"hour": "2024-06-29",
"name": "变量5004",
"day": "2024-06-29"
},
{
"val": "2.77",
"unit": "m",
"hour": "2024-06-30",
"name": "变量5004",
"day": "2024-06-30"
},
{
"val": "3.51",
"unit": "m",
"hour": "2024-07-01",
"name": "变量5004",
"day": "2024-07-01"
},
{
"val": "2.75",
"unit": "m",
"hour": "2024-07-02",
"name": "变量5004",
"day": "2024-07-02"
},
{
"val": "0.64",
"unit": "m",
"hour": "2024-07-03",
"name": "变量5004",
"day": "2024-07-03"
},
{
"val": "0.94",
"unit": "m",
"hour": "2024-07-04",
"name": "变量5004",
"day": "2024-07-04"
},
{
"val": "0.55",
"unit": "m",
"hour": "2024-07-05",
"name": "变量5004",
"day": "2024-07-05"
},
{
"val": "1.06",
"unit": "m",
"hour": "2024-07-06",
"name": "变量5004",
"day": "2024-07-06"
},
{
"val": "0.63",
"unit": "m",
"hour": "2024-07-07",
"name": "变量5004",
"day": "2024-07-07"
},
{
"val": "0.21",
"unit": "m",
"hour": "2024-07-08",
"name": "变量5004",
"day": "2024-07-08"
},
{
"val": "0.21",
"unit": "m",
"hour": "2024-07-09",
"name": "变量5004",
"day": "2024-07-09"
},
{
"val": "0.21",
"unit": "m",
"hour": "2024-07-10",
"name": "变量5004",
"day": "2024-07-10"
},
{
"val": "0.20",
"unit": "m",
"hour": "2024-07-11",
"name": "变量5004",
"day": "2024-07-11"
},
{
"val": "0.15",
"unit": "m",
"hour": "2024-07-12",
"name": "变量5004",
"day": "2024-07-12"
},
{
"val": "0.21",
"unit": "m",
"hour": "2024-07-13",
"name": "变量5004",
"day": "2024-07-13"
},
{
"val": "0.21",
"unit": "m",
"hour": "2024-07-14",
"name": "变量5004",
"day": "2024-07-14"
},
{
"val": "0.48",
"unit": "m",
"hour": "2024-07-15",
"name": "变量5004",
"day": "2024-07-15"
},
{
"val": "1.85",
"unit": "m",
"hour": "2024-07-16",
"name": "变量5004",
"day": "2024-07-16"
},
{
"val": "2.96",
"unit": "m",
"hour": "2024-07-17",
"name": "变量5004",
"day": "2024-07-17"
},
{
"val": "3.08",
"unit": "m",
"hour": "2024-07-18",
"name": "变量5004",
"day": "2024-07-18"
},
{
"val": "3.23",
"unit": "m",
"hour": "2024-07-19",
"name": "变量5004",
"day": "2024-07-19"
},
{
"val": "3.15",
"unit": "m",
"hour": "2024-07-20",
"name": "变量5004",
"day": "2024-07-20"
},
{
"val": "0.23",
"unit": "m",
"hour": "2024-07-21",
"name": "变量5004",
"day": "2024-07-21"
},
{
"val": "0.56",
"unit": "m",
"hour": "2024-07-22",
"name": "变量5004",
"day": "2024-07-22"
},
{
"val": "0.72",
"unit": "m",
"hour": "2024-07-23",
"name": "变量5004",
"day": "2024-07-23"
},
{
"val": "1.14",
"unit": "m",
"hour": "2024-07-25",
"name": "变量5004",
"day": "2024-07-25"
},
{
"val": "2.35",
"unit": "m",
"hour": "2024-07-26",
"name": "变量5004",
"day": "2024-07-26"
},
{
"val": "3.11",
"unit": "m",
"hour": "2024-07-27",
"name": "变量5004",
"day": "2024-07-27"
},
{
"val": "1.88",
"unit": "m",
"hour": "2024-07-28",
"name": "变量5004",
"day": "2024-07-28"
},
{
"val": "1.78",
"unit": "m",
"hour": "2024-07-29",
"name": "变量5004",
"day": "2024-07-29"
},
{
"val": "3.20",
"unit": "m",
"hour": "2024-07-30",
"name": "变量5004",
"day": "2024-07-30"
},
{
"val": "2.31",
"unit": "m",
"hour": "2024-07-31",
"name": "变量5004",
"day": "2024-07-31"
},
{
"val": "1.76",
"unit": "m",
"hour": "2024-08-01",
"name": "变量5004",
"day": "2024-08-01"
}
],
[
{
"val": "9.39",
"unit": "m³/h",
"hour": "2024-06-01",
"name": "化学需氧量",
"day": "2024-06-01"
},
{
"val": "10.06",
"unit": "m³/h",
"hour": "2024-06-02",
"name": "化学需氧量",
"day": "2024-06-02"
},
{
"val": "15.37",
"unit": "m³/h",
"hour": "2024-06-03",
"name": "化学需氧量",
"day": "2024-06-03"
},
{
"val": "15.67",
"unit": "m³/h",
"hour": "2024-06-04",
"name": "化学需氧量",
"day": "2024-06-04"
},
{
"val": "10.97",
"unit": "m³/h",
"hour": "2024-06-05",
"name": "化学需氧量",
"day": "2024-06-05"
},
{
"val": "8.79",
"unit": "m³/h",
"hour": "2024-06-06",
"name": "化学需氧量",
"day": "2024-06-06"
},
{
"val": "7.78",
"unit": "m³/h",
"hour": "2024-06-07",
"name": "化学需氧量",
"day": "2024-06-07"
},
{
"val": "10.34",
"unit": "m³/h",
"hour": "2024-06-08",
"name": "化学需氧量",
"day": "2024-06-08"
},
{
"val": "26.17",
"unit": "m³/h",
"hour": "2024-06-09",
"name": "化学需氧量",
"day": "2024-06-09"
},
{
"val": "8.75",
"unit": "m³/h",
"hour": "2024-06-10",
"name": "化学需氧量",
"day": "2024-06-10"
},
{
"val": "13.94",
"unit": "m³/h",
"hour": "2024-06-11",
"name": "化学需氧量",
"day": "2024-06-11"
},
{
"val": "11.43",
"unit": "m³/h",
"hour": "2024-06-12",
"name": "化学需氧量",
"day": "2024-06-12"
}
]
]- props type参数为控制显示柱状图还是折线图
