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

 

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

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

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

下面先来一个柱状图：

现附上效果图：

 

image.png

下面是使用方法：

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的结构

rows: [
    {date: '2018-11-01', orderCount: 10, orderAmount: 1093}, {date: '2018-11-02', orderCount: 20, orderAmount: 2230}, {date: '2018-11-03', orderCount: 33, orderAmount: 3623}, {date: '2018-11-04', orderCount: 50, orderAmount: 6423}, {date: '2018-11-05', orderCount: 80, orderAmount: 8492}, {date: '2018-11-06', orderCount: 60, orderAmount: 6293}, {date: '2018-11-07', orderCount: 20, orderAmount: 2293}, {date: '2018-11-08', orderCount: 60, orderAmount: 6293}, {date: '2018-11-09', orderCount: 50, orderAmount: 5293}, {date: '2018-11-10', orderCount: 30, orderAmount: 3293}, {date: '2018-11-11', orderCount: 20, orderAmount: 2293}, {date: '2018-11-12', orderCount: 80, orderAmount: 8293}, {date: '2018-11-13', orderCount: 100, orderAmount: 10293}, {date: '2018-11-14', orderCount: 10, orderAmount: 1293}, {date: '2018-11-15', orderCount: 40, orderAmount: 4293} ] 

这些都完成以后，咱们就能在浏览器看到一开是的截图了。
下面附上完整代码，因为异步接口没法直观的展现咱们的data结构，因此我在完整代码里面用的是静态数据，方便你们更直观的查看

<template>
  <ve-histogram :data="chartData" :colors="chartColor" :legend-visible="true" :loading="loading" :data-empty="dataEmpty" :extend="extend" :settings="chartSettings">
  </ve-histogram>
</template>
<script> const DATA_FROM_BACKEND = { rows: [ {date: '2018-11-01', orderCount: 10, orderAmount: 1093}, {date: '2018-11-02', orderCount: 20, orderAmount: 2230}, {date: '2018-11-03', orderCount: 33, orderAmount: 3623}, {date: '2018-11-04', orderCount: 50, orderAmount: 6423}, {date: '2018-11-05', orderCount: 80, orderAmount: 8492}, {date: '2018-11-06', orderCount: 60, orderAmount: 6293}, {date: '2018-11-07', orderCount: 20, orderAmount: 2293}, {date: '2018-11-08', orderCount: 60, orderAmount: 6293}, {date: '2018-11-09', orderCount: 50, orderAmount: 5293}, {date: '2018-11-10', orderCount: 30, orderAmount: 3293}, {date: '2018-11-11', orderCount: 20, orderAmount: 2293}, {date: '2018-11-12', orderCount: 80, orderAmount: 8293}, {date: '2018-11-13', orderCount: 100, orderAmount: 10293}, {date: '2018-11-14', orderCount: 10, orderAmount: 1293}, {date: '2018-11-15', orderCount: 40, orderAmount: 4293} ] }; 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 = DATA_FROM_BACKEND.rows // 注意这里应该是接口给返回回来的数据，为了方便展现data结构，我这里用的是静态数据
        this.dataEmpty = false } console.log(res) }, } } </script>

 

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

//折线图
<ve-line :data="chartData"></ve-line> //饼状图 <ve-pie :data="chartData"></ve-pie>

连接：https://www.jianshu.com/p/c6d1908ae543