Skip to content

基于 Vue2.0 和 ECharts 封装的图表组件📈📊

License

Notifications You must be signed in to change notification settings

ElemeFE/v-charts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
quietcoder
Dec 27, 2017
c14be09 · Dec 27, 2017
Oct 30, 2017
Oct 11, 2017
Dec 11, 2017
Dec 26, 2017
Dec 26, 2017
Dec 11, 2017
Sep 14, 2017
Sep 14, 2017
Sep 14, 2017
Aug 6, 2017
Oct 11, 2017
Sep 12, 2017
Nov 10, 2017
Mar 17, 2017
Oct 16, 2017
Dec 27, 2017
Dec 1, 2017

Repository files navigation

V-Charts

Build Status NPM downloads JS gzip size Npm package Language License Join the chat at https://gitter.im/ElemeFE/v-charts

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

文档

https://elemefe.github.io/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>

LICENSE


MIT