基本概念

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

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

官網地址

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官方的文檔只介紹了如何創建和使用插件部分，詳細的屬性配置還是需要去chart.js的文檔里面找。

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

npm

npm install vue-chartjs chart.js --save

組件

圖表組件： Bar:柱狀圖 HorizontalBar:水平條形圖 Doughnut:圓環圖 Line:折線圖 Pie:餅圖 PolarArea:極地區域圖 Radar:雷達圖/蛛網圖 Bubble:氣泡分布圖 Scatter:散點圖其他組件： mixins generateChert

示例組件?

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

?

效果

參考文章

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。