**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容器了

 

这里介绍一下我上面用到的几个属性，

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 
     12 

 

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

1 //折线图2 
      3 //饼状图4 
      

 

等等这里不在一一赘述，需要的直接去看介绍即可。

如果有我没说明白的地方，欢迎大家给我留言或者私信。