add lib folder
This commit is contained in:
9
lib/components/charts/src/main.css
Normal file
9
lib/components/charts/src/main.css
Normal file
@ -0,0 +1,9 @@
|
||||
.dv-charts-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-charts-container .charts-canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
64
lib/components/charts/src/main.vue
Normal file
64
lib/components/charts/src/main.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="dv-charts-container" :ref="ref">
|
||||
<div class="charts-canvas-container" :ref="chartRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import Charts from '@jiaminghi/charts'
|
||||
|
||||
export default {
|
||||
name: 'DvCharts',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: `charts-container-${(new Date()).getTime()}`,
|
||||
chartRef: `chart-${(new Date()).getTime()}`,
|
||||
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
option () {
|
||||
let { chart, option } = this
|
||||
|
||||
if (!chart) return
|
||||
|
||||
if (!option) option = {}
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { initChart } = this
|
||||
|
||||
initChart()
|
||||
},
|
||||
initChart () {
|
||||
const { $refs, chartRef, option } = this
|
||||
|
||||
const chart = this.chart = new Charts($refs[chartRef])
|
||||
|
||||
if (!option) return
|
||||
|
||||
chart.setOption(option)
|
||||
},
|
||||
onResize () {
|
||||
const { chart } = this
|
||||
|
||||
if (!chart) return
|
||||
|
||||
chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user