极客观点
研发管理
HarmonyOS
父组件在不同的tab里引用同一组件，只是传递参数不一样，代码：
<a-tabs v-model:activeKey="activeKey" centered>
<a-tab-pane key="kjsLine" tab="xAxis曲线">
<Line :key="1" ref="drawkjsline" @getParamsNameByClick="getParamsNameByClick"></Line>
</a-tab-pane>
<a-tab-pane key="rcyl1Line" tab="xAxis1曲线">
<Line
:key="2"
ref="drawrcyl1line"
@getParamsNameByClick="getParamsNameByClick"
></Line>
</a-tab-pane>
<a-tab-pane key="rcylLine" tab="xAxis2曲线">
<Line
:key="3"
ref="drawrcylline"
@getParamsNameByClick="getParamsNameByClick"
></Line>
</a-tab-pane>
</a-tabs>默认展示tab key为kjsLine的曲线，这是正常的，但key为rcyl1Line rcylLine 曲线在选择后显示的echarts不完整
<template>
<div id="yywx" style="width: 100%; height: 350px; margin: auto"></div>
</template>
<script setup>
import * as echarts from 'echarts'
const emit = defineEmits(['getParamsNameByClick'])
//如果flag为1则需要click事件
async function yywxdrawLine(title, xData, yData, flag) {
window.onload = function () {
let element = document.getElementById('yywx')
let width = element.clientWidth
}
let dom = document.getElementById('yywx')
let myChart = echarts.init(dom)
let option = {
title: {
text: title + '曲线' + '(' + xData[0] + '--' + xData[xData.length - 1] + ')',
left: 'center',
textAlign: 'auto',
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#ddd',
},
},
backgroundColor: 'rgba(255,255,255,1)',
padding: [5, 10],
textStyle: {
color: '#7588E4',
},
extraCssText: 'box-shadow: 0 0 1px rgba(0,0,0,0.3)',
},
toolbox: {
feature: {
saveAsImage: {
type: 'png',
title: '保存为图片',
},
},
},
grid: {
// 让图表占满容器
top: '20%',
left: '5%',
right: '5%',
bottom: '10%',
},
xAxis: {
type: 'category',
data: xData,
boundaryGap: false,
splitLine: {
show: true,
interval: 'auto',
lineStyle: {
color: ['#D4DFF5'],
},
},
splitLine: {
//网格线
show: false,
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#609ee9',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
},
yAxis: {
type: 'value',
// splitLine: {
// lineStyle: {
// color: ["#D4DFF5"],
// },
// },
splitLine: {
//网格线
show: false,
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#609ee9',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
min: function (value) {
//由于开井数与日产液量级不一样，为控制曲线波动，确定返回y轴最小值
let res
res = value.min < 10000 ? value.min - 30 : value.min - 1000
res = value.min < 30 ? 0 : res.toFixed(1)
return res
},
},
series: [
{
name: title.split('）')[1],
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
data: yData,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(216, 244, 247,1)',
},
{
offset: 1,
color: 'rgba(216, 244, 247,1)',
},
],
false
),
},
},
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
// color: "#d14a65",
},
itemStyle: {
normal: {
color: '#58c8da',
},
},
lineStyle: {
normal: {
width: 3,
},
},
},
],
}
dom.removeAttribute('_echarts_instance_')
option && myChart.setOption(option)
myChart.getZr().on('click', 'xAxis.category', function (params) {
let rq = null
//防止echarts折现图只能通过点击个点才能触发
const pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
const xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY,
])[0]
//xIndex是横坐标点位
rq = xData[xIndex]
}
if (flag == 1) {
emit('getParamsNameByClick', rq, title)
}
return
})
window.addEventListener('resize', () => {
myChart.resize()
})
}
defineExpose({
yywxdrawLine,
})
</script>