chartjs更新数据 vue_vue集成chart.js的实现方法

指令

该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行

vue.directive('loaded-callback', {

inserted: function (el, binding, vnode) {

binding.value(el, binding, vnode)

}

})

安装chartjs

npm install chart.js --save

chartjs 组件

require('chart.js')

export default{

name: 'components-base-chartjs',

props: {

'data': {},

'options': {},

'type': {}

},

data:function(){

return {

canvas: null,

chart: null

}

},

watch:{

canvas: function () { // chart对象生成时触发

this.initchart()

},

data: {

handler: function () { // 数据变化时触发

this.updatechart()

},

deep: true

}

},