57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<div ref="vehicleChartRef" id="chart-container"></div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onMounted ,onUnmounted} from 'vue';
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
let myChart = null
|
||
|
|
const getLine = async () => {
|
||
|
|
var chartDom = document.getElementById('chart-container');
|
||
|
|
console.log("chartDom")
|
||
|
|
myChart = echarts.init(chartDom);
|
||
|
|
var option;
|
||
|
|
|
||
|
|
option = {
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
|
|
type: 'line',
|
||
|
|
areaStyle: {}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
console.log("option", option);
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleResize = () => {
|
||
|
|
myChart?.resize()
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
getLine()
|
||
|
|
window.addEventListener('resize', handleResize)
|
||
|
|
})
|
||
|
|
onUnmounted(() => {
|
||
|
|
window.removeEventListener('resize', handleResize)
|
||
|
|
myChart?.dispose()
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
#chart-container{
|
||
|
|
z-index:999;
|
||
|
|
}
|
||
|
|
</style>
|