Vue 图表展示功能的实现：使用 Vue-chartjs 和 Chart.js 库

网页有图片才带感光是枯燥的数字看着真无聊！给大家安利一下一个超牛逼的JavaScript库——Vue.js。这个框架能让你的网站瞬间变得有趣起来，而且运行速度也是飞快！今天咱们就来学习如何用Vue和Vue-chartjs做些炫酷的图表，让你家的数据也亮瞎众人的眼！

Vue与图表展示的奇妙结合

别烦心，Vue是没自带图表功能不过这儿有个跟它搭配超棒的vue-chartjs小部件，其实就是借用了知名的Chart.js帮咱们完成图表绘制工作。这么实用的工具在手，各种类型的图和表就都能轻松应对！

不要冲动地开始动手画图！首先得把Vue-chartjs和Chart.js添加到你的项目中。然后，回到主页文件（main.js），简单操作两步就能开始玩转图表咯~

npm install vue
npm install chart.js

创建图表组件

npm install vue-chartjs

对，接下来就开始做霸气外露的ChartComponent.vueVue组件！它能让你随心所欲地画各种图表~别忘了，加点VueChartJS.Line的料，才能玩儿转它。

解决了ChartComponent.vue的问题之后，我们给它加上了新玩意儿，换掉了之前的数据和样式，这下可好，变成了非常实用的Vue组件，既容易理解又漂亮美观！

import Vue from 'vue'
import Chart from 'chart.js'
import VueChartJS from 'vue-chartjs'
Vue.use(VueChartJS, { Chart })

在页面中引用图表组件

搞定图表之后，直接往网页上粘贴一下！就是把ChartComponent.vue复制到App.vue文件里去，图表就能顺利展示~

那个叫作pageComponent.vue的小东西，它就是个用来在每页上展示组件的能手！

  

    
  


export default {
  extends: VueChartJS.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#FBB03B',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, { responsive: true, maintainAspectRatio: false })
  }
}

完整的代码实现

别急把pageComponent.vue拷贝到App.vue里就成了。搞定！接着？试试浏览器打入一个网址看看，惊奇的是，图表已经跳出来！

运行和测试

搞定没有？赶紧打开APP，网上找找这个地儿！看看地图上马上显示出来的样子！厉害不？对头，它们两个配合起来可真牛逼！

  

    
  


import ChartComponent from './ChartComponent.vue'
export default {
  components: {
    ChartComponent
  }
}

代码示例和资源链接

别急！哥们儿我把全套代码都在GitHub上发布咯~直接去下载，按步骤来，很快就能画出超炫的图表！

总结与展望

看完这篇文章，你应该就懂怎么用Vue和Vue-chart.js画出高大上的图表。顺便提几个实用小妙招，以后做项目时肯定能用得到，让你对无聊的数据也能看得津津有味！

  

    
  


import PageComponent from './pageComponent.vue'
export default {
  name: 'App',
  components: {
    PageComponent
  }
}

说说你用过哪些图表库呗？好使的话是为啥，不好使又是怎么回事儿？别忘了在评论区唠唠嗑给个赞分享一下呗！