实时趋势折线图闪动问题修改
This commit is contained in:
@@ -20,7 +20,7 @@ const config = useConfig()
|
|||||||
color[0] = config.layout.elementUiPrimary[0]
|
color[0] = config.layout.elementUiPrimary[0]
|
||||||
const chartRef = ref<HTMLDivElement>()
|
const chartRef = ref<HTMLDivElement>()
|
||||||
|
|
||||||
const props = defineProps(['options'])
|
const props = defineProps(['options','isInterVal'])
|
||||||
let chart: echarts.ECharts | any = null
|
let chart: echarts.ECharts | any = null
|
||||||
const resizeHandler = () => {
|
const resizeHandler = () => {
|
||||||
// 不在视野中的时候不进行resize
|
// 不在视野中的时候不进行resize
|
||||||
@@ -33,8 +33,10 @@ const resizeHandler = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const initChart = () => {
|
const initChart = () => {
|
||||||
|
if(!props.isInterVal){
|
||||||
chart?.dispose()
|
chart?.dispose()
|
||||||
|
}
|
||||||
|
// chart?.dispose()
|
||||||
chart = echarts.init(chartRef.value as HTMLDivElement)
|
chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||||
const options = {
|
const options = {
|
||||||
title: {
|
title: {
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
})?.name
|
})?.name
|
||||||
}}
|
}}
|
||||||
</p> -->
|
</p> -->
|
||||||
<MyEchart :ref="setChildRef(index)" :options="item.echartsData"></MyEchart>
|
<MyEchart :ref="setChildRef(index)" :options="item.echartsData" :isInterVal="true"></MyEchart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -389,6 +389,7 @@ const init = () => {
|
|||||||
item.echartsData.options.series.push({
|
item.echartsData.options.series.push({
|
||||||
name: zz.phase,
|
name: zz.phase,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
increment: true,
|
||||||
barMaxWidth: 24, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
|
barMaxWidth: 24, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// normal: {
|
// normal: {
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tab_info" v-if="Object.keys(tableData).length != 0">
|
<div class="tab_info" v-if="Object.keys(tableData).length != 0">
|
||||||
<div class="charts">
|
<div class="charts">
|
||||||
<MyEchart ref="barCharts" :options="echartsData"></MyEchart>
|
<MyEchart ref="barCharts" :options="echartsData" :isInterVal="true"></MyEchart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-empty v-else style="margin: 0 auto" />
|
<el-empty v-else style="margin: 0 auto" />
|
||||||
|
|||||||
@@ -169,7 +169,7 @@ const initRadioCharts = () => {
|
|||||||
echartsData1.value = {
|
echartsData1.value = {
|
||||||
options: {
|
options: {
|
||||||
grid: {
|
grid: {
|
||||||
top: 230
|
top: 0
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: '',
|
text: '',
|
||||||
@@ -624,9 +624,13 @@ onMounted(() => {
|
|||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
.mid_charts {
|
.mid_charts {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 80%;
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
bottom:10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user