篇一：如何将 v-charts 引入到项目中

谁践踏了优雅 2023-07-01 08:45 35阅读 0赞

> 在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。
> 
> 官网地址：[https://v-charts.js.org/\#/][https_v-charts.js.org]

### 一：准备工作，将图表组件js文件引入 ###

**1、npm安装**

npm i v-charts echarts -S

ps：如果本地未安装nodejs，这儿有 [npm安装教程 ][npm]呢，咱不怕，一步一步来；如果嫌麻烦，我还有办法，详看下文cdn引入；

**2、cdn引入**

>  js 的 2 种 引入 方式：
> 
>       1 、下载代码文件至本地项目中，引入。
> 
>       2 、通过 CDN（内容分发网络） 引用它 。
> 
> 两种方式，选择适合自己前端项目的引入方式即可； 如下我是采用npm方式安装

### 二、介绍cdn引入示例 ###

** 第1、引入v-charts中的某种图表组件**

<html lang="en">
    <head>
      <title>v-charts</title>
    </head>
    <body>
      <div id="app">
        <ve-line :data="chartData"></ve-line>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/line.min.js"></script>
      
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
      <script>
        new Vue({
          el: '#app',
          data: function () {
            return {
              chartData: {
                columns: ['日期', '销售额'],
                rows: [
                  { '日期': '1月1日', '销售额': 123 },
                  { '日期': '1月2日', '销售额': 1223 },
                  { '日期': '1月3日', '销售额': 2123 },
                  { '日期': '1月4日', '销售额': 4123 },
                  { '日期': '1月5日', '销售额': 3123 },
                  { '日期': '1月6日', '销售额': 7123 }
                ]
              }
            }
          },
          components: { VeLine }
        })
      </script>
    </body>
    </html>

第2、引入v-charts中的全部图表组件

<html lang="en">
    <head>
      <title>v-charts</title>
    </head>
    <body>
      <div id="app">
        <ve-line :data="chartData"></ve-line>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
      <script>
        new Vue({
          el: '#app',
          data: function () {
            return {
              chartData: {
                columns: ['日期', '销售额'],
                rows: [
                  { '日期': '1月1日', '销售额': 123 },
                  { '日期': '1月2日', '销售额': 1223 },
                  { '日期': '1月3日', '销售额': 2123 },
                  { '日期': '1月4日', '销售额': 4123 },
                  { '日期': '1月5日', '销售额': 3123 },
                  { '日期': '1月6日', '销售额': 7123 }
                ]
              }
            }
          }
        })
      </script>
    </body>
    </html>

###  三、npm安装方式引入示例 ###

v-charts的每种图表组件，都已经单独打包到lib文件夹下了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70][]

**1、使用时，可以直接将单个图表引入到项目中 **

import Vue from 'vue'
    import VeLine from 'v-charts/lib/line.common'
    import App from './App.vue'
    
    Vue.component(VeLine.name, VeLine)
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })

** 2、完整引入**

// main.js
    import Vue from 'vue'
    import VCharts from 'v-charts'
    import App from './App.vue'
    
    Vue.use(VCharts)
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })

ps：如果是采用cdn方式 引入，使用百度地图或高德地图时需要额外引入相应的模块；

以上就是导入 v-charts 组件的全部过程了，如果对此有何疑问，欢迎下方给阿怂留言；

如果想继续了解 v-charts 如何使用，请看这篇：[vue中 v-charts 的图表数据如何从后台获取][vue_ v-charts]

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢怂怂写的文章，就给阿怂点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言，阿怂看到一定会极力给予宁最满意的答复。

[https_v-charts.js.org]: https://v-charts.js.org/#/
[npm]: https://www.runoob.com/nodejs/nodejs-npm.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020012014531464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw==,size_16,color_FFFFFF,t_70
[vue_ v-charts]: https://blog.csdn.net/weixin_43970743/article/details/104052013