指令
该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行
Vue.directive('loaded-callback', { inserted: function (el, binding, vnode) { binding.value(el, binding, vnode) }})安装chartjs
npm install chartjsapp.js 引入
由于我用的是直接把chartjs文件拷贝进去而不是通过安装
require('../../Chart.js')注：这里遇到个情况，使用的时候报Chart方法不存在
所以我用了
window.Chart = require('../../Chart.js')chartjs 组件
<template> <canvas refs="chartcanvas" v-loaded-callback="setChart"></canvas></template><script type="text/javascript">export default{ name: 'components-base-chartjs', props: { 'data': {}, 'options': {}, 'type': {} }, data:function(){ return { chart: null, defaultOptions: { // 默认配置 'pie': { //Boolean - Whether we should show a stroke on each segment segmentShowStroke : true, //String - The colour of each segment stroke segmentStrokeColor : '#fff', //Number - The width of each segment stroke segmentStrokeWidth : 2, //Number - The percentage of the chart that we cut out of the middle percentageInnerCutout: 50, // This is 0 for Pie charts //Number - Amount of animation steps animationSteps : 100, //String - Animation easing effect animationEasing : 'easeOutBounce', //Boolean - Whether we animate the rotation of the Doughnut animateRotate : true, //Boolean - Whether we animate scaling the Doughnut from the centre animateScale : false, //Boolean - whether to make the chart responsive to window resizing responsive : true, // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio : true, //String - A legend template legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>' }, 'area': { //Boolean - If we should show the scale at all showScale : true, //Boolean - Whether grid lines are shown across the chart scaleShowGridLines : false, //String - Colour of the grid lines scaleGridLineColor : 'rgba(0,0,0,.05)', //Number - Width of the grid lines scaleGridLineWidth : 1, //Boolean - Whether to show horizontal lines (except X axis) scaleShowHorizontalLines: true, //Boolean - Whether to show vertical lines (except Y axis) scaleShowVerticalLines : true, //Boolean - Whether the line is curved between points bezierCurve : true, //Number - Tension of the bezier curve between points bezierCurveTension : 0.3, //Boolean - Whether to show a dot for each point pointDot : false, //Number - Radius of each point dot in pixels pointDotRadius : 4, //Number - Pixel width of point dot stroke pointDotStrokeWidth : 1, //Number - amount extra to add to the radius to cater for hit detection outside the drawn point pointHitDetectionRadius : 20, //Boolean - Whether to show a stroke for datasets datasetStroke : true, //Number - Pixel width of dataset stroke datasetStrokeWidth : 2, //Boolean - Whether to fill the dataset with a color datasetFill : true, //String - A legend template legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>', //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio : true, //Boolean - whether to make the chart responsive to window resizing responsive : true }, 'line': { //Boolean - If we should show the scale at all showScale : true, //Boolean - Whether grid lines are shown across the chart scaleShowGridLines : false, //String - Colour of the grid lines scaleGridLineColor : 'rgba(0,0,0,.05)', //Number - Width of the grid lines scaleGridLineWidth : 1, //Boolean - Whether to show horizontal lines (except X axis) scaleShowHorizontalLines: true, //Boolean - Whether to show vertical lines (except Y axis) scaleShowVerticalLines : true, //Boolean - Whether the line is curved between points bezierCurve : true, //Number - Tension of the bezier curve between points bezierCurveTension : 0.3, //Boolean - Whether to show a dot for each point pointDot : false, //Number - Radius of each point dot in pixels pointDotRadius : 4, //Number - Pixel width of point dot stroke pointDotStrokeWidth : 1, //Number - amount extra to add to the radius to cater for hit detection outside the drawn point pointHitDetectionRadius : 20, //Boolean - Whether to show a stroke for datasets datasetStroke : true, //Number - Pixel width of dataset stroke datasetStrokeWidth : 2, //Boolean - Whether to fill the dataset with a color datasetFill : false, //String - A legend template legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>', //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio : true, //Boolean - whether to make the chart responsive to window resizing responsive : true }, 'bar': { //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value scaleBeginAtZero : true, //Boolean - Whether grid lines are shown across the chart scaleShowGridLines : true, //String - Colour of the grid lines scaleGridLineColor : 'rgba(0,0,0,.05)', //Number - Width of the grid lines scaleGridLineWidth : 1, //Boolean - Whether to show horizontal lines (except X axis) scaleShowHorizontalLines: true, //Boolean - Whether to show vertical lines (except Y axis) scaleShowVerticalLines : true, //Boolean - If there is a stroke on each bar barShowStroke : true, //Number - Pixel width of the bar stroke barStrokeWidth : 2, //Number - Spacing between each of the X value sets barValueSpacing : 5, //Number - Spacing between data sets within X values barDatasetSpacing : 1, //String - A legend template legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>', //Boolean - whether to make the chart responsive responsive : true, maintainAspectRatio : true }, 'radar': { //Boolean - Whether to show lines for each scale point scaleShowLine : true, //Boolean - Whether we show the angle lines out of the radar angleShowLineOut : true, //Boolean - Whether to show labels on the scale scaleShowLabels : false, // Boolean - Whether the scale should begin at zero scaleBeginAtZero : true, //String - Colour of the angle line angleLineColor : "rgba(0,0,0,.1)", //Number - Pixel width of the angle line angleLineWidth : 1, //String - Point label font declaration pointLabelFontFamily : "'Arial'", //String - Point label font weight pointLabelFontStyle : "normal", //Number - Point label font size in pixels pointLabelFontSize : 10, //String - Point label font colour pointLabelFontColor : "#666", //Boolean - Whether to show a dot for each point pointDot : true, //Number - Radius of each point dot in pixels pointDotRadius : 3, //Number - Pixel width of point dot stroke pointDotStrokeWidth : 1, //Number - amount extra to add to the radius to cater for hit detection outside the drawn point pointHitDetectionRadius : 20, //Boolean - Whether to show a stroke for datasets datasetStroke : true, //Number - Pixel width of dataset stroke datasetStrokeWidth : 2, //Boolean - Whether to fill the dataset with a colour datasetFill : true, //String - A legend template legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" } } } }, watch:{ chart: function () { // chart对象生成时触发 this.loadChart() }, data: { handler: function () { // 数据变化时触发 this.loadChart() }, deep: true } }, destoryed:function (){ if(this.cahrt){ this.cahrt.destroy() } }, computed: { currentOptions: function (){ var options = this.defaultOptions[this.type] if(this.options){ // 加载自定义配置参数 for(var i in this.options){ options[i] = this.options[i] } } return options } }, methods: { setChart: function(el){ // dom生成时触发 this.chart = new Chart(el.getContext('2d')) }, loadChart: function () { // 加载或更新chart结果 if(this.data && this.currentOptions){ // 保证参数的存在 switch (this.type) { case 'pie': this.chart.Doughnut(this.data, this.currentOptions) break; case 'area': this.chart.Line(this.data, this.currentOptions) break; case 'line': this.chart.Line(this.data, this.currentOptions) break; case 'bar': this.chart.Bar(this.data, this.currentOptions) break; case 'radar': this.chart.Radar(this.data, this.currentOptions) break; } } } }}</script>用法
<chartjs :options="options" type="pie" :data="data"></chartjs>options 及数据结构
请跳转