add point chart

This commit is contained in:
jiaming 2018-12-22 20:55:24 +08:00
parent eebc56dcb0
commit 3bf5ec71e8
1 changed files with 69 additions and 0 deletions

View File

@ -0,0 +1,69 @@
<template>
<div class="point-chart">
<loading v-if="!data" />
<div class="canvas-container">
<canvas :ref="ref" />
</div>
</div>
</template>
<script>
import canvasMixin from '../../mixins/canvasMixin.js'
import colorsMixin from '../../mixins/colorsMixin.js'
import axisMixinEx from '../../mixins/axisMixinEx.js'
export default {
name: 'PointChart',
mixins: [canvasMixin, colorsMixin, axisMixinEx],
props: ['data', 'colors'],
data () {
return {
ref: `point-chart-${(new Date()).getTime()}`,
// axis base config
boundaryGap: true,
horizon: false,
mulValueAdd: true
}
},
methods: {
async init () {
const { initCanvas, initColors, initAxis } = this
await initCanvas()
initColors()
initAxis()
const { drawAxis } = this
drawAxis()
}
},
mounted () {
const { init } = this
init()
}
}
</script>
<style lang="less">
.point-chart {
position: relative;
display: flex;
.canvas-container {
flex: 1;
canvas {
width: 100%;
height: 100%;
}
}
}
</style>