【前端数据可视化】 06 - vue-echarts 和 v-charts 组件库

1. vue-Echarts

1.1 安装 vue-Echarts

1. 需要同时安装 echarts 和 vue-echarts -> cnpm install echarts vue-echarts -S。

2. 在main.js中注册:

import Vue_ECharts from 'vue-echarts'
Vue.component('v-echart', Vue_ECharts)

3. 使用:

data() {
      return {
        data: {
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          series: [{
            type: 'line',
            data: [100, 200, 300]
          }],
        }
      }
    }

4. GitHub地址:vue-echarts

2. v-charts

1. 文档: v-charts文档示例。

2.1 安装 v-charts

1. 安装 v-charts: cnpm i v-charts echarts -S。

2.2 使用按需引入的方式引入

1. 在plugin下新建一个文件vcharts.js，类似ElementUI 的按需引入。

import Vue from 'vue';
import VeLine from 'v-charts/lib/line.common';

/* 按需引入方式 */
Vue.component('ve-line',VeLine)

2. 在main.js中引入该插件文件:

import './plugins/vcharts'

3. 使用新注册的 ve-line组件:

data() {
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户'],
          rows: [
            {'日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810},
            {'日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398},
            {'日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910}
          ]
        }
      }
    }