当前位置: 首页 > 文档资料 > V-Charts 中文文档 >

开始使用

优质
小牛编辑
132浏览
2023-12-01

引入 v-charts

完整引入

import Vue from 'vue'
import VCharts from 'v-charts-v2'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

单独引入组件

v-charts 的每种图表组件,都以 umd 的格式打包到 lib 文件夹下

|- lib/
    |- line.js  -------------- 折线图

使用时,可以直接将单个图表引入到项目中

import Vue from 'vue'
import VeLine from 'v-charts-v2/lib/line'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})

按需引入

lib 文件夹中打包了一个 es module 文件,用于借助 webpack 或 rollup 的 tree-shaking 实现按需引入。

import Vue from 'vue'
import { VeLine } from 'v-charts-v2/lib/index.esm'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})