v-charts 圖表元件是基於 Vue2.0 和 echarts 封裝的 ，只需要統一提供一種對前後端都友好的資料格式設定簡單的配置項，便可輕鬆生成常見的圖表。本列主要實現vue使用v-charts實現一個簡單的折線圖。

一、使用npm安裝新增在package.json檔案中的依賴

package.json檔案的依賴
    "dependencies": {
       "vue": "^2.5.2",
       "vue-resource": "^1.3.4",
       "vue-router": "^3.0.1",
       "echarts": "^4.0.4",
       "v-charts": "^1.16.7"
     }
 

npm 安裝

    npm install echarts --save

   npm install v-charts --save（自定義安裝依賴）

   npm install （安裝package.json檔案的所有依賴）

二、VChartsDemo.vue中寫個容器-圖示顯示的位置

<template>
  <div id="vcharts-demo">
    <ve-line :data="chartData" ref="chart1"></ve-line>
  </div>
</template>
 

三、在檔案中按需引入需要的模組。

<script type="text/ecmascript-6">// 引入提示框元件、標題元件、工具箱元件、圖例元件。
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legendScroll';
import VeLine from 'v-charts/lib/line';
import 'v-charts/lib/style.css';
 

四、完整js

<script type="text/ecmascript-6">
  // 引入提示框元件、標題元件、工具箱元件、圖例元件。
  import 'echarts/lib/component/tooltip';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/legendScroll';
 // 引入v-charts折線圖元件。
  import VeLine from 'v-charts/lib/line';
  import 'v-charts/lib/style.css';
  
  export default {
    components: {
      VeLine
    },
    data() {
      return {
        chartData: {
          columns: ['日期', '銷售額-1季度'],
          rows: [
            {'日期': '1月1日', '銷售額-1季度': 1523},
            {'日期': '1月2日', '銷售額-1季度': 1223},
            {'日期': '1月3日', '銷售額-1季度': 2123},
            {'日期': '1月4日', '銷售額-1季度': 4123},
            {'日期': '1月5日', '銷售額-1季度': 3123},
            {'日期': '1月6日', '銷售額-1季度': 7123}
          ]
        }
      };
    },
    created() {
// 這是模擬動態資料用的
      setTimeout(() => {
        this.chartData = {};
        this.chartData = {
          columns: ['日期', '銷售額-1季度'],
          rows: [
            {'日期': '1月1日', '銷售額-1季度': 1523},
            {'日期': '1月2日', '銷售額-1季度': 1223},
            {'日期': '1月3日', '銷售額-1季度': 2123},
            {'日期': '1月4日', '銷售額-1季度': 4123},
            {'日期': '1月5日', '銷售額-1季度': 3123},
            {'日期': '1月6日', '銷售額-1季度': 7123},
            {'日期': '1月7日', '銷售額-1季度': 1583},
            {'日期': '1月8日', '銷售額-1季度': 1273},
            {'日期': '1月9日', '銷售額-1季度': 2163},
            {'日期': '1月10日', '銷售額-1季度': 4523},
            {'日期': '1月11日', '銷售額-1季度': 3323},
            {'日期': '1月12日', '銷售額-1季度': 7223}
          ]
        };
      }, 2000);
    },
    mounted() {
    }
  };
</script>

五、結果展示

 1.頁面初始

2.兩秒後