v-charts

https://v-charts.js.org/#/

• 基于 Vue2.0 和 echarts 封装的 v-charts 图表组件
• 类似于 bizCharts，组件化方式引入 echarts
• 适合快速生成图表，而且对图表不做任何修改
• 不适合定制化开发
• 特色
  • 封装了百度地图
  • 高德地图

    npm i v-charts echarts -S

    elementUI FE 封装的
    https://github.com/ElemeFE/v-charts
    中文文档 https://github.com/ElemeFE/v-charts/blob/master/README_CN.md
    

v-charts缺点

• 需要二次学习，上手成本高
• 修改了 echarts的 options，复杂样式定制，需要学习封装的默认属性
• 自定义data和 event事件，很多属性和 echarts不兼容

ve-line

<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: ['date', 'PV'],
        rows: [
          { 'date': '01-01', 'PV': 1231 },
          { 'date': '01-02', 'PV': 1223 },
          { 'date': '01-03', 'PV': 2123 },
          { 'date': '01-04', 'PV': 4123 },
          { 'date': '01-05', 'PV': 3123 },
          { 'date': '01-06', 'PV': 7123 }
        ]
      }
    }
  }
}
</script>