V-Charts

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

安装

npm i v-charts -S

快速上手

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

<script>
import VeLine from 'v-charts/lib/line'
export default {
  created () {
    this.chartData = {
      columns: ['日期', '销售量'],
      rows: [
        { '日期': '1月1日', '销售量': 123 },
        { '日期': '1月2日', '销售量': 1223 },
        { '日期': '1月3日', '销售量': 2123 },
        { '日期': '1月4日', '销售量': 4123 },
        { '日期': '1月5日', '销售量': 3123 },
        { '日期': '1月6日', '销售量': 7123 }
      ]
    }
  },

  components: { VeLine }
}
</script>

目前支持的图表有 line, bar, column, waterfall, pie, ring, funnel, radar

文档

https://vue-echarts.github.io/

属性

| 配置项 | 简介 | 类型 | 示例 | 备注 | | --- | --- | --- | --- | --- | | data | 图表数据 | Object | { columns: [], rows: [] } | columns代表指标和维度名称， rows为数据内容 | | settings | 图表配置项 | Object | { "yAxisType": [ "KMB", "percent" ] } | | | colors | 颜色列表 | Array | [ "#19d4ae", "#5ab1ef", "#fa6e86", "#ffb980", "#0067a6", "#c4b4e4" ] | | | tooltip | 是否显示提示框 | Boolean | false | 默认为true | | grid | 网格配置 | Object | { left: 20, right: 20 } | | | scale | 是否是脱离 0 值比例 | Object | { x: true, y: true } | 设置成 true 后坐标刻度不会强制包含零刻度，默认都是false | | events | 为图表绑定事件 | Object | { click: function (e) { console.log(e) } } | | | before-config | 对数据提前进行额外的处理 | Function | function (data) { /* do something */return data; } | 在数据转化为配置项开始前触发，参数为data，需返回表格数据 | after-config | 对生成好的echarts配置进行额外的处理 | Function | function (options) { /* do something */return options; } | 在数据转化为配置项结束后触发，参数为options, 需返回echarts配置