Vue项目中使用v-charts

v-charts官网地址

https://v-charts.js.org

安装依赖

打开命令行,输入vue ui,打开可视化界面

echarts

依赖>安装依赖>运行依赖>echarts

v-charts

依赖>安装依赖>运行依赖>v-charts

配置插件

在项目src目录下,新建dependences目录,新建vcharts.js

import Vue from 'vue'
import VCharts from 'v-charts'

Vue.use(VCharts)

在main.js中导入vcharts.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
// 导入vcharts
import './dependences/vcharts.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

使用

新建一个VChartsDemo.vue

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

<script>
export default {
  data() {
    return {
      chartData: {
        columns: ['city', 'percent'],
        rows: [
          {
            city: '上海',
            percent: 0.6
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>

运行效果: