vue 中使用 v-charts 制图

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.两秒后