【后台系统开发】 vue-admin-template 写一个自己的dashboard 加入Echarts图表库

加入Echarts图表库

Echartsjs图表库，是我个人心中的地表最强前端图表库，官方Demo可欣赏：ECharts Demo 。由于日常的研究，基本的流程就是，爬取数据，数据清洗，数据分析和数据结论展示，对于最后一步的结论展示，图表肯定是最直观的。

导入echarts到项目

很有趣的是，目前有两家公司在维护echarts for vue的工作，一家是作者方百度，提供了vue-echartsGitHub - ecomfe/vue-echarts: ECharts component for Vue.js., 另一家是vue生态大贡献家，饿了么，提供了v-echarts，GitHub - ElemeFE/v-charts: 基于 Vue2.0 和 ECharts 封装的图表组件📈📊。更有趣的是star数都在2k多，不相上下。简单比较了下，vue-echarts使用暴露原生配置的方式，理论上可以支持echarts的所有特性，而v-echarts是主打易用性，在封装和局部导入缩减大小等方面做了很多工作，但是从文档上看，支持的图表类型没有echarts官方多，但也足够用了。所以为了方便，还是选择了后者，如果实在不能满足需求了，自定义也无妨。

直接安装：

npm i v-charts echarts -S

运行demo

在respage01/index.vue中加入v-charts demo代码：

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
  import VeLine from 'v-charts/lib/line.common'
    export default {
        name: "index",
        components: { VeLine },
        data () {
          return {
            chartData: {
              columns: ['date', 'PV'],
              rows: [
                { 'date': '01-01', 'PV': 1231 },
                { 'date': '01-02', 'PV': 1223 },
                { 'date': '01-03', 'PV': 2123 },
                { 'date': '01-04', 'PV': 4123 },
                { 'date': '01-05', 'PV': 3123 },
                { 'date': '01-06', 'PV': 7123 }
             ]
            }
          }
        }
    }
</script>
<style scoped>
</style>

 

 

获得如下结果：

 

image.png

作者：萝卜日志
链接：https://www.jianshu.com/p/1b4570e210b8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。