V-Charts 基于 Vue2.x 的 Echarts 组件

Question

特点

统一的数据格式

使用对前后端都友好的数据格式，方便生成和修改。

简化的配置项

通过简化的配置项，可以轻松实现复杂需求。

定制简单

提供多种自定义 Echarts 方式，可以方便的设置图表配置项。

支持性

支持所有现代浏览器及 IE10+ ，包括 pc 端和移动端。

安装

npm i v-charts echarts -S

快速上手

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

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

中文文档：https://www.wenjiangs.com/docs/v-charts-cn