基本概念

vue-chartjs：vue-chartjs is a wrapper for?Chart.js?in vue. You can easily create reuseable chart components.?

Chart.js：Chart.js?是一套簡單、干凈并且有吸引力的基于 HTML5技術(shù)的 JavaScript圖表工具。Chart.js為你提供了完整的易于集成到你的網(wǎng)站的生動、交互的圖表。

官網(wǎng)地址

https://vue-chartjs.org/?

GitHub

https://github.com/apertureless/vue-chartjs

DEMO

http://demo.vue-chartjs.org/

API

vue-chartjs的API參考Chart.js的API：

注：vue-chartjs官方的文檔只介紹了如何創(chuàng)建和使用插件部分，詳細(xì)的屬性配置還是需要去chart.js的文檔里面找。

https://www.chartjs.org/docs/latest/

npm

npm install vue-chartjs chart.js --save

組件

圖表組件： Bar:柱狀圖 HorizontalBar:水平條形圖 Doughnut:圓環(huán)圖 Line:折線圖 Pie:餅圖 PolarArea:極地區(qū)域圖 Radar:雷達(dá)圖/蛛網(wǎng)圖 Bubble:氣泡分布圖 Scatter:散點(diǎn)圖其他組件： mixins generateChert

示例組件?

import {Line} from 'vue-chartjs' export default {extends: Line,//要引入的圖形 (bar是餅狀圖)props:["data","options"],//可以在以組件傳參的形式定義data,和options配置//創(chuàng)建圖形必須要在mounted函數(shù)里，mounted:function(){//是在配置線形圖的漸變效果this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450);this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');this.renderChart({ //圖形初始化函數(shù)labels:[], //表示x軸的配置 如日期 ['1', '2', '3', '4', '5', '6','7',"8","9","10","11","12","13","14","15"],datasets:[ //是個數(shù)組 表示線性走勢及對走勢線的配置{label: '0.38', //小標(biāo)題的顯示backgroundColor: this.gradient,//線性圖 的漸變顏色data: [3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8],//數(shù)據(jù)走勢pointBackgroundColor: 'blue',//x軸 Y軸對應(yīng)圓點(diǎn)的顏色pointBorderColor: 'white',//x軸 Y軸對應(yīng)圓點(diǎn)的圓點(diǎn)border的顏色fontSize:0,//字體的大小radius:"0"//圓點(diǎn)的半徑}],}, //相當(dāng)于data配置{responsive: true, // 長寬，100%.如果要單設(shè)長和寬的話，要將responsive 設(shè)為falsemaintainAspectRatio: false, // 保持長寬比events: ['null'],//對事件的反應(yīng)，null是對任何事件都無反應(yīng)的設(shè)置，默認(rèn)為["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]layout: {//線形圖 位置padding: {left: 0,right:0,top: 0,bottom: 0}},legend:{ // title下面的 小標(biāo)題 和 小圖的配置display:true, //是顯示position:"top",//顯示的位置fullWidth:"true", //標(biāo)記此框應(yīng)占據(jù)畫布的整個寬度（按下其他框）。這在日常使用中不太可能需要改變onClick:function(){},//點(diǎn)擊時的回調(diào)onHover:function(){}, //在標(biāo)簽項(xiàng)上注冊“mousemove”事件時調(diào)用的回調(diào)函數(shù)reverse:false, //圖例將以相反的順序顯示數(shù)據(jù)集。labels:{ //圖例標(biāo)簽配置boxWidth:10 ,//彩色框的寬度fontSize:"20", //文本的字體大小fontStyle:"normal", //字體風(fēng)格fontColor:"red", // 文本的顏色padding:10, //填充行之間的彩色框fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", //字體家族usePointStyle:false //標(biāo)簽樣式將匹配相應(yīng)的點(diǎn)樣式（大小基于fontSize，在這種情況下不使用boxWidth）}},animation: {//設(shè)置不做動畫 （可以提高性能）duration: 0// general animation time},hover: {animationDuration: 0// duration of animations when hovering an item},responsiveAnimationDuration: 0, // animation duration after a resizetooltips:{ //對點(diǎn)擊提示框的配置enabled:true, //是否啟用工具提示custom:null, //類型是function 可以自定義提示框mode:"point"/*提示框可以出現(xiàn)那些數(shù)據(jù) （1、point 點(diǎn) 查找與點(diǎn)相交的所有項(xiàng)目。2、nearest 最近的數(shù)據(jù) 獲取距離該點(diǎn)最近的項(xiàng)目。最近的項(xiàng)目是根據(jù)到圖表項(xiàng)目中心的距離（點(diǎn)，條）確定的。如果2個或更多項(xiàng)目在相同的距離，則使用面積最小的項(xiàng)目。如果intersect為true，則僅在鼠標(biāo)位置與圖形中的項(xiàng)目相交時觸發(fā)。這對組合圖表非常有用，其中點(diǎn)隱藏在條形圖的后面。3、index 標(biāo)簽 在相同的索引處查找項(xiàng)目。如果intersect設(shè)置為true，則使用第一個相交項(xiàng)目來確定數(shù)據(jù)中的索引。如果為intersectfalse，則在x方向上最近的項(xiàng)目用于確定索引。4 dataset 數(shù)據(jù)集 在相同的數(shù)據(jù)集中查找項(xiàng)目。如果intersect設(shè)置為true，則使用第一個相交項(xiàng)目來確定數(shù)據(jù)中的索引。如果為intersectfalse，則使用最近的項(xiàng)目來確定索引5 x 僅返回基于X位置坐標(biāo)相交的所有項(xiàng)目。對于垂直游標(biāo)實(shí)現(xiàn)將是有用的6 y 根據(jù)Y位置的坐標(biāo)返回所有相交的項(xiàng)目。這對于水平游標(biāo)實(shí)現(xiàn)是有用的）callbacks:{ //所有的回調(diào)函數(shù) http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks}backgroundColor："red" //背景顏色等等詳細(xì)配置參考 git http://www.chartjs.org/docs/latest/configuration/tooltip.html*/},title: { //對標(biāo)題的配置display: true,//是否顯示text: 'Custom Chart Title:0.38', //title內(nèi)容position:"left", //title位置fontSize:20, //字體大小 默認(rèn)為12pxfontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", //字體家族文本fontColor:'#666',fontStyle:'bold', //字體樣式padding:10, //在標(biāo)題文本上方和下方添加的像素數(shù)量lineHeight:10 //單行文本的高度},scales:{ //對x，y軸進(jìn)行個人配置及對 網(wǎng)格等進(jìn)行個性化配置都寫在此處yAxes:[{ //對Y軸進(jìn)行配置ticks:{ //對Y軸開始配置beginAtZero:true,//如果為true，則如果還沒有包含，則標(biāo)度將包括0。suggestedMin: 1,//計算最小數(shù)據(jù)值時使用的調(diào)整suggestedMax: 5,//計算最小數(shù)據(jù)值時使用的調(diào)整stepSize:1, //用戶定義的比例尺的固定步長maxTicksLimit:1, //最大數(shù)量的刻度線和網(wǎng)格線顯示min:0, //用戶定義的最小數(shù)量，覆蓋數(shù)據(jù)的最小值max:0, //用戶定義的最大數(shù)量，覆蓋數(shù)據(jù)的最大值},gridLines: {//Y軸網(wǎng)格配置display:false, //如果為false，則不顯示該軸的網(wǎng)格線。color:"red",//網(wǎng)格線的顏色。如果指定為數(shù)組，第一種顏色適用于第一個網(wǎng)格線，第二個適用于第二個網(wǎng)格線，依此類推borderDash:1,//網(wǎng)格線上的破折號的長度和間距borderDashOffset:1,//折線為破折號lineWidth:1, //網(wǎng)格線的行程寬度drawBorder:true,//如果為true，則在軸和圖表區(qū)域之間的邊緣繪制邊框drawOnChartArea:true, //如果為true，則在軸線內(nèi)的圖表區(qū)域繪制線條。當(dāng)有多個軸時，這是很有用的，而且您需要控制繪制哪些網(wǎng)格線。drawTicks:true,//如果為true，則在圖表旁邊的軸區(qū)域中的刻度線旁繪制線條tickMarkLength:10, //網(wǎng)格線將繪制到軸區(qū)域的長度（以像素為單位）zeroLineWidth:1, //第一個索引（索引0）的網(wǎng)格線的行程寬度zeroLineColor:"red", //第一個索引（索引0）的網(wǎng)格線的筆觸顏色zeroLineBorderDash:1, //第一個索引（索引0）的網(wǎng)格線的破折號的長度和間隔zeroLineBorderDashOffset:1, //第一個索引（索引0）的網(wǎng)格線的折線偏移量offsetGridLines:false, //如果為true，網(wǎng)格線將被移動到標(biāo)簽之間。這true在默認(rèn)情況下設(shè)置在條形圖中//更多配置http://www.chartjs.org/docs/latest/axes/radial/linear.html}}],xAxes:[{ //x軸同Y軸一樣上配置}]},})//相當(dāng)于options配置this.gradient = this.$refs.canvas //再引入chart.js的的組件內(nèi)開始繪圖} }

?

效果

參考文章

https://www.jianshu.com/p/466c99c07930

https://www.npmjs.com/package/vue-chartjs

https://blog.csdn.net/gqzydh/article/details/99213365

https://blog.csdn.net/masterShaw/article/details/76045359

https://blog.csdn.net/qq_40282732/article/details/103263961

https://www.cnblogs.com/stealth7/p/7112216.html

總結(jié)

以上是生活随笔為你收集整理的Vue——vue-chartjs[Vue 对于 Chart.js 的封装]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。