Vue：绘制图表组件 v-charts的安装

川长思鸟来 2024-04-19 08:43 61阅读 0赞

###### 1. 使用npm安装 ######

npm i v-charts echarts -S

###### 2. 组件引入 ######

v-charts有两种引入方式，一是所有图表组件完整引入，二是按所需图表类型按需引入

*  完整引入  
    在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)
    })

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

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

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)
    })

###### 3. 简单使用 ######

<template>
      <div>
        <ve-line :data="chartData"></ve-line>
      </div>
    </template>
    
    <script>
      import VeLine from 'v-charts/lib/line'
      export default {
        created () {
          this.chartData = {
            columns: ['日期', '销售量'],
            rows: [
              { '日期': '1月1日', '销售量': 123},
              { '日期': '1月2日', '销售量': 1223},
              { '日期': '1月3日', '销售量': 2123},
              { '日期': '1月4日', '销售量': 4123},
              { '日期': '1月5日', '销售量': 3123},
              { '日期': '1月6日', '销售量': 7123}
            ]
          }
        },
    
        components: { VeLine }
      }
    </script>

然后可以看到一个简单的折现图已经绘制成功！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a2db3e3cc3f74711b6f88659af554349.png