58 lines
1.3 KiB
Vue
Executable File
58 lines
1.3 KiB
Vue
Executable File
<template>
|
|
<v-chart ref="lineChart" :option="option" autoresize />
|
|
</template>
|
|
|
|
<script>
|
|
import { use } from 'echarts/core'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
import { LineChart } from 'echarts/charts'
|
|
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
|
|
import VChart from 'vue-echarts'
|
|
use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])
|
|
|
|
export default {
|
|
name: 'LineChart',
|
|
props: {
|
|
data: { type: Object, default: () => {} }
|
|
},
|
|
components: {
|
|
VChart,
|
|
},
|
|
computed: {
|
|
option() {
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: this.data.series.map(ser => ser.name) || []
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: this.data.xData || [],
|
|
axisLabel: {
|
|
showMaxLabel: true,
|
|
showMinLabel: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
minInterval: 1
|
|
},
|
|
series: this.data.series || []
|
|
}
|
|
return option
|
|
}
|
|
},
|
|
beforeUnmount() {
|
|
// 手动销毁实例
|
|
if (this.$refs.lineChart && this.$refs.lineChart.dispose) {
|
|
this.$refs.lineChart.dispose();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |