vue可视化图表 基于Echarts封装好的v-charts简介

**vue可视化图表 基于echarts封装好的v-charts**

近期公司又一个新的需求，要做一个订单和销售额统计的项目，需要用到可视化图表来更直观的展示数据。首先我想到的是echarts，众所周知echarts是一个应用很广的可视化图表库，用来展示统计数据更合适不过，但是偶然间发现了一个更为方便的图表库，就是我们今天要介绍的v-charts，它是基于echarts图表库进行了一次封装，让我们可以更好更方便更简单的来展示我们的数据，首先附上他的官方介绍：

v-charts对于用户很友好，把数据封装成很好的模式，不进让我们更好的来使用它，而且他还完全支持echarts的所有方法和属性。echarts有的图表，v-charts都进行了封装。

下面先来一个柱状图：

现附上效果图：

 

下面是使用方法：

1.安装依赖

*这里需要说明，由于v-charts是基于echarts进行封装的，所以我们在安装依赖的时候，需要把echarts和v-charts都进行安装。*

npm install echarts v-charts --save-dev

 

2.依赖安装好之后，我们直接引入v-charts即可，我们在main.js中进行引入

import vcharts from 'v-charts'
vue.use(vcharts)

 

3.我们在相应的组件中直接使用就可以了，比如说柱状图是ve-histogram，我们直接写标签即可，不需要在创建一个div容器了

<ve-histogram
  :data="chartdata"
  :colors="chartcolor"
  :legend-visible="true"
  :loading="loading"
  :data-empty="dataempty"
  :extend="extend"
  :settings="chartsettings">
</ve-histogram>

 

这里介绍一下我上面用到的几个属性，
data：就是我们要绑定的数据，下面会详细介绍
colors：就是我们图表中每一项对应的颜色
legend-visible：是否显示图例
loading：是否显示loaidng
data-empty：在数据为空的时候，是否显示暂无数据
extend：就是我们自定义的echarts的原有属性，在v-charts的一些属性满足不了我们的需求的情况下，我们可以配置extend，来直接使用echarts的optios，来覆盖v-charts的属性。
settings：一些v-charts封装好的设置。

下面就是我们的属性配置了：
在这里需要说明一下，v-charts的无数据和loading的样式是单独的，如果需要这两个需求，我们需要引入css，如果不需要，不引入就行。

import 'v-charts/lib/style.css'
export default {
  name: 'vcharts',
  data () {
    return {
      chartsettings: {
        xaxistype: 'time',
        area: true,
        yaxisname: ['订单总数', '订单金额'],
        axissite: {right: ['orderamount']},
        labelmap: {'ordercount': '订单数量', 'orderamount': '订单金额'}
      },
      chartdata: {
        columns: ['date', 'ordercount', 'orderamount'],
        rows: []
      },
      extend: {
        series: {
          symbolsize: 10,
          label: {
            normal: {
              show: true
            }
          }
        }
      },
      chartcolor: ['#89dd47', '#3cabf4'],
      loading: false,
      dataempty: false
    }
  }
 created () {
    this.getdata()
  }
  methods: {
    async getdata () {
      const res = await getorderdata(})
      if (res.data.length === 0) {
        this.dataempty = true
      } else {
        this.chartdata.rows = res.data.rows
        this.dataempty = false
      }
      console.log(res)
    },
  }
}

 

上述代码中的getorderdata()方法是我调用的接口方法，如下所示：

// 图表订单和金额
export function getorderdata (res) {
  return http.post({
    url: base_url + '/order/getorderdata',
    data: res
  })
}

 

上述的http.post方法是我封装的axios的post请求方法，篇幅有限，这里不在叙述，具体封装方法，会在其他文章进行讲解。
在这里我展示一下请求过来的data的结构

 1 rows: [
 2     {date: '2018-11-01', ordercount: 10, orderamount: 1093},
 3     {date: '2018-11-02', ordercount: 20, orderamount: 2230},
 4     {date: '2018-11-03', ordercount: 33, orderamount: 3623},
 5     {date: '2018-11-04', ordercount: 50, orderamount: 6423},
 6     {date: '2018-11-05', ordercount: 80, orderamount: 8492},
 7     {date: '2018-11-06', ordercount: 60, orderamount: 6293},
 8     {date: '2018-11-07', ordercount: 20, orderamount: 2293},
 9     {date: '2018-11-08', ordercount: 60, orderamount: 6293},
10     {date: '2018-11-09', ordercount: 50, orderamount: 5293},
11     {date: '2018-11-10', ordercount: 30, orderamount: 3293},
12     {date: '2018-11-11', ordercount: 20, orderamount: 2293},
13     {date: '2018-11-12', ordercount: 80, orderamount: 8293},
14     {date: '2018-11-13', ordercount: 100, orderamount: 10293},
15     {date: '2018-11-14', ordercount: 10, orderamount: 1293},
16     {date: '2018-11-15', ordercount: 40, orderamount: 4293}
17   ]

 

 

这些都完成之后，我们就能在浏览器看到一开是的截图了。
下面附上完整代码，由于异步接口无法直观的展示我们的data结构，所以我在完整代码里面用的是静态数据，方便大家更直观的查看

 1 <template>
 2   <ve-histogram
 3     :data="chartdata"
 4     :colors="chartcolor"
 5     :legend-visible="true"
 6     :loading="loading"
 7     :data-empty="dataempty"
 8     :extend="extend"
 9     :settings="chartsettings">
10   </ve-histogram>
11 </template>
12 <script>
13 
14 const data_from_backend = {
15   rows: [
16     {date: '2018-11-01', ordercount: 10, orderamount: 1093},
17     {date: '2018-11-02', ordercount: 20, orderamount: 2230},
18     {date: '2018-11-03', ordercount: 33, orderamount: 3623},
19     {date: '2018-11-04', ordercount: 50, orderamount: 6423},
20     {date: '2018-11-05', ordercount: 80, orderamount: 8492},
21     {date: '2018-11-06', ordercount: 60, orderamount: 6293},
22     {date: '2018-11-07', ordercount: 20, orderamount: 2293},
23     {date: '2018-11-08', ordercount: 60, orderamount: 6293},
24     {date: '2018-11-09', ordercount: 50, orderamount: 5293},
25     {date: '2018-11-10', ordercount: 30, orderamount: 3293},
26     {date: '2018-11-11', ordercount: 20, orderamount: 2293},
27     {date: '2018-11-12', ordercount: 80, orderamount: 8293},
28     {date: '2018-11-13', ordercount: 100, orderamount: 10293},
29     {date: '2018-11-14', ordercount: 10, orderamount: 1293},
30     {date: '2018-11-15', ordercount: 40, orderamount: 4293}
31   ]
32 };
33 
34 import 'v-charts/lib/style.css'
35 export default {
36   name: 'vcharts',
37   data () {
38     return {
39       chartsettings: {
40         xaxistype: 'time',
41         area: true,
42         yaxisname: ['订单总数', '订单金额'],
43         axissite: {right: ['orderamount']},
44         labelmap: {'ordercount': '订单数量', 'orderamount': '订单金额'}
45       },
46       chartdata: {
47         columns: ['date', 'ordercount', 'orderamount'],
48         rows: []
49       },
50       extend: {
51         series: {
52           symbolsize: 10,
53           label: {
54             normal: {
55               show: true
56             }
57           }
58         }
59       },
60       chartcolor: ['#89dd47', '#3cabf4'],
61       loading: false,
62       dataempty: false
63     }
64   }
65  created () {
66     this.getdata()
67   }
68   methods: {
69     async getdata () {
70       const res = await getorderdata(})
71       if (res.data.length === 0) {
72         this.dataempty = true
73       } else {
74         this.chartdata.rows = data_from_backend.rows // 注意这里应该是接口给返回回来的数据，为了方便展示data结构，我这里用的是静态数据
75         this.dataempty = false
76       }
77       console.log(res)
78     },
79   }
80 }
81 </script>

 

以上就是v-charts的基本用法了，上面用的是柱状图，其他例如：折线图，饼状图等等都是这样的用法，区别就是标签不一样

1 //折线图
2 <ve-line :data="chartdata"></ve-line>
3 //饼状图
4 <ve-pie :data="chartdata"></ve-pie>

view code

 

等等这里不在一一赘述，需要的直接去看介绍即可。
如果有我没说明白的地方，欢迎大家给我留言或者私信。