diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js new file mode 100644 index 0000000..65dec89 --- /dev/null +++ b/src/BaseCharts/Bubble.js @@ -0,0 +1,51 @@ +import Vue from 'vue' +import Chart from 'chart.js' +import { mergeOptions } from '../helpers/options' + +export default Vue.extend({ + template: ` +
+ +
+ `, + + props: { + chartId: { + default: 'bubble-chart', + type: String + }, + width: { + default: 400, + type: Number + }, + height: { + default: 400, + type: Number + } + }, + + data () { + return { + defaultOptions: { + } + } + }, + + methods: { + render (data, options) { + let chartOptions = mergeOptions(this.defaultOptions, options) + + this._chart = new Chart( + this.$els.canvas.getContext('2d'), { + type: 'bubble', + data: data, + options: chartOptions + } + ) + this._chart.generateLegend() + } + }, + beforeDestroy () { + this._chart.destroy() + } +}) diff --git a/src/index.js b/src/index.js index edf86a9..7740349 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import Line from './BaseCharts/Line' import Pie from './BaseCharts/Pie' import PolarArea from './BaseCharts/PolarArea' import Radar from './BaseCharts/Radar' +import Bubble from './BaseCharts/Bubble' const VueCharts = { Bar, @@ -11,7 +12,8 @@ const VueCharts = { Line, Pie, PolarArea, - Radar + Radar, + Bubble } module.exports = VueCharts