如何将Vue与Chart.js结合实现复杂图表的动态展示？

本文共计460个文字，预计阅读时间需要2分钟。

指令+%E6%8C%87%E4%BB%A4%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AFdom%E6%B8%B2%E6%9F%93%E5%90%8E%E8%A7%A6%E5%8F%91%EF%BC%8C%E5%9B%A0%E4%B8%BA%E9%9D%9Evue%E7%9A%84%E6%8F%92%E4%BB%B6%E6%9C%89%E7%9A%84%E6%98%AFdom%E5%BF%85%E9%A1%BB%E5%AD%98%E5%9C%A8%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%E6%89%8D%E5%8F%AF%E4%BB%A5%E6%89%A7%E8%A1%8C%EF%BC%8C%E4%BD%BF%E7%94%A8Vue.directive%28%27loaded-callback%27%2C+%7B+inserted%3A+function+%28el%2C+binding%2C+vnode%29+%7B+binding.value%28el%2C+binding%2C+vnode%29+%7D%7D%29+%E5%AE%89%E8%A3%85%EF%BC%9D

指令

该指令的作用是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 及数据结构

请跳转

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