index.vue代码
<template>
<div >
<Chart v-if="model == 'parking' && source?.way == 'Playback'" />
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent(()=>import('@/components/Chart.vue'))
Chart.vue 代码
<template>
<div class="parkingChart" id="chart" style="height:100%;width:90%;"></div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
function pageInit() {
var Chart = echarts.init(document.getElementById('chart')
var option = ({
title: {
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
name: '',
nameLocation: 'middle',
type: 'category',
boundaryGap: false,
data: ['-14', '-13', '-12', '-11', '-10', '-9', '-8', '-7'],
nameTextStyle: {
lineHeight: 20
}
},
legend: {
data: ['FF', 'FS'],
textStyle: {
color: "(232, 219, 219, 1)"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
}
},
yAxis: {
name: '',
nameLocation: 'middle',
type: 'value',
boundaryGap: false,
nameTextStyle: {
lineHeight: 20
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{
name: 'FF',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'FS',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
})
Chart.setOption(option)
}
onMounted(() => {
pageInit()
})
折线图显示