78 lines
1.3 KiB
Vue
78 lines
1.3 KiB
Vue
<template>
|
|
<div ref="chart" :class="className" :style="{height:height,width:width}" />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import resize from '../mixins/resize'
|
|
import { simpleChart } from '../option'
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '200px'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '200px'
|
|
},
|
|
sizeRatio: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
testData() {
|
|
return [{
|
|
name: 'series1',
|
|
data: [{
|
|
name: '07/20',
|
|
value: 10
|
|
}, {
|
|
name: '07/21',
|
|
value: 11
|
|
}]
|
|
}, {
|
|
name: 'series2',
|
|
data: [{
|
|
name: '07/20',
|
|
value: 13
|
|
}, {
|
|
name: '07/21',
|
|
value: 15
|
|
}]
|
|
}]
|
|
},
|
|
initChart() {
|
|
this.chart = echarts.init(this.$refs.chart)
|
|
this.chart.setOption(simpleChart(this.testData(), 1, {
|
|
type: 'line',
|
|
yAxisName: '大小',
|
|
showLegend: true
|
|
}))
|
|
}
|
|
}
|
|
}
|
|
</script>
|