Vue.js的图表库组件 – V-Charts

Vue.js的图表库组件 –  V-Charts

插件名称:v-charts

发布时间:2020年8月2日

插件作者:ElemeFE

官网 演示 GitHub下载

V-Charts Vue.js组件使为复杂数据集生成各种图表变得简单。基于Echart.js

变更日志:

v0.9.0(07/31/2020)

  • 重构

安装和下载:

npm i v-charts -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>
相关插件