安装chartjs
npminstallchart.js--save
chartjs组件
require('chart.js')
exportdefault{
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
}
},
destoryed:function(){
if(this.cahrt){
this.cahrt.destroy()
}
},
computed:{
currentOptions:function(){
varoptions={}
if(this.options){//加载自定义配置参数
for(variinthis.options){
options[i]=this.options[i]
}
}
returnoptions
}
},
methods:{
setCanvas:function(el){//dom生成时触发
this.canvas=el
},
initChart:function(){//更新chart结果
if(this.data&&this.currentOptions){//保证参数的存在
this.chart=newChart(this.canvas.getContext('2d'),{
type:this.type,
data:this.data,
options:this.currentOptions
})
}
},
updateChart:function(){//更新chart结果
this.chart.data=JSON.parse(JSON.stringify(this.data))
this.chart.update()
}
}
}
用法
options及数据结构
请跳转
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。