v-charts

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

下载

npm安装：

npm i v-charts echarts -S

引入

// 在main中引入 v - charts
import VCharts from 'v-charts'
Vue.use(VCharts)

运用

首先是导入模块：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

使用百度地图或高德地图时需要额外引入相应的模块

<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

实例：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>

 <template>
  
<ve-pie  width="500px" :data="chartData2" ></ve-pie>

  </template>
<script>

  // 导出模块
  export default {
    data() {
      return {
      
        chartData2:{
         columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1/1', '访问用户': 1393 },
            { '日期': '1/2', '访问用户': 3530 },
            { '日期': '1/3', '访问用户': 2923 },
            { '日期': '1/4', '访问用户': 1723 },
            { '日期': '1/5', '访问用户': 3792 },
            { '日期': '1/6', '访问用户': 4593 }
          ]},
    
     }
    }

  };
</script>

效果：

我使用的是饼形图，你也可以使用其他的图形：

|- lib/
    |- line.common.js  -------------- 折线图
    |- bar.common.js  --------------- 条形图
    |- histogram.common.js  --------- 柱状图
    |- pie.common.js  --------------- 饼图
    |- ring.common.js  -------------- 环图
    |- funnel.common.js  ------------ 漏斗图
    |- waterfall.common.js  --------- 瀑布图
    |- radar.common.js  ------------- 雷达图
    |- map.common.js  --------------- 地图
    |- sankey.common.js  ------------ 桑基图
    |- heatmap.common.js  ----------- 热力图
    |- scatter.common.js  ----------- 散点图
    |- candle.common.js  ------------ k线图
    |- gauge.common.js  ------------- 仪表盘
    |- tree.common.js  -------------- 树图
    |- bmap.common.js  -------------- 百度地图
    |- amap.common.js  -------------- 高德地图

切换<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>这一句也可以单独导入一个图形，

动态使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
  <!--平台资金记录-->
  <template>
                <ve-pie  width="500px" :data="chartData2" ></ve-pie>
  </template>
<script>
  // 导出模块
  export default {
    data() {
      return {
        chartData2:{}
      }
    },
    created(){
      //图形展示
      url = this.axios.urls.SYSTEM_ASSET_DETAIL_ZCSRSUM;
      this.axios.post(url, {}).then((response) => {
        console.log(response.data.data);
        this.chartData2= {
          columns: [ '状态','金额'],
          rows: response.data.data
        }
      }).catch((response) => {
        //carch则是异常
        console.log(response);
      });
    }
  };
</script>
<style scoped>


</style>

可以看到，我基本不需要转换数据格式等，基本效果都是显示的，

而且v-charts还有一个功能我觉得挺好的，就是图表切换，
也就是一种数据可以用多种图形展示，详情见官网，我这里简单描述：

<template>
  <div>
    <button @click="changeType">切换图表类型</button>
    <ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
  </div>
</template>

<script>
  export default {
    data () {
      this.typeArr = ['line', 'histogram', 'pie']
      this.index = 0
      return {
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '1月1日', '访问用户': 1523 },
            { '日期': '1月2日', '访问用户': 1223 },
            { '日期': '1月3日', '访问用户': 2123 },
            { '日期': '1月4日', '访问用户': 4123 },
            { '日期': '1月5日', '访问用户': 3123 },
            { '日期': '1月6日', '访问用户': 7123 }
          ]
        },
        chartSettings: { type: this.typeArr[this.index] }
      }
    },
    methods: {
      changeType: function () {
        this.index++
        if (this.index >= this.typeArr.length) { this.index = 0 }
        this.chartSettings = { type: this.typeArr[this.index] }
      }
    }
  }
</script>

点击切换：

相比Echars做简单展示还是挺好的。。。

若有问题，可私聊博主，