欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue集成chart.js的实现方法

程序员文章站 2022-04-28 20:41:02
指令 该指令的作用是dom渲染后触发,因为非vue的插件有的是dom必须存在的情况下才可以执行 vue.directive('loaded-callback...

指令

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

vue.directive('loaded-callback', {
 inserted: function (el, binding, vnode) {
  binding.value(el, binding, vnode)
 }
})

安装chartjs

npm install chart.js --save

chartjs 组件

<template>
  <canvas refs="chartcanvas" v-loaded-callback="setcanvas"></canvas>
</template>
<script type="text/javascript">
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
    }
  },
  destoryed:function (){
    if(this.cahrt){
      this.cahrt.destroy()
    }
  },
  computed: {
    currentoptions: function (){
      var options = {}
      if(this.options){ // 加载自定义配置参数
        for(var i in this.options){
          options[i] = this.options[i]
        }
      }
      return options
    }
  },
  methods: {
    setcanvas: function(el){ // dom生成时触发
      this.canvas = el
    },
    initchart: function () { // 更新chart结果
      if(this.data && this.currentoptions){ // 保证参数的存在
        this.chart = new chart(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()
    }
  }
}
</script>

用法

<chartjs :options="options" type="pie" :data="data"></chartjs>

options 及数据结构


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。