关于echarts的两个库

608 阅读1分钟

vue-echarts

npm install echarts vue-echarts

特点:

  • 比较简单
  • 基于echarts的简单封装。
  • 一直在迭代更新。

使用

// 引入
import VueEcharts from 'vue-echarts'
// 注册组件
Vue.component('vue-echarts', VueEcharts)

//使用
<vue-echarts :options="data"></vue-echarts>

官网: ecomfe.github.io/vue-echarts…

v-charts

由于不在维护,vue3不能使用。在vue2中使用还是挺方便的。

npm i v-charts echarts -S

注意:安装的时候,由于没有在维护,可能会出现版本不兼容问题。建议安装一下版本的v-charts和echart

    "echarts": "^4.9.0",
    "v-charts": "^1.19.0",
    "vue": "^2.6.11",
    "vue-echarts": "^5.0.0-beta.0",

特点:

  • 可以快速生成图表,不需要修改。
  • 需要学习大量api。
  • 如果需要实现一些特殊图表(水球,词云图等)他是非常方便的。直接提供数据,就能快速渲染。

使用

// 引入
import VCharts from 'v-charts'
import 'v-charts/lib/style.css'

// 注册插件
Vue.use(VCharts)

// 使用
根据他的内置组件,并绑定data数据

官网加事例 woolen.gitee.io/v-charts/#/…