简单使用v-echarts

1.下载v-charts，如果是为了解决报错，则直接跳到最后一步

 npm i v-charts echarts -S

2.正常引入main.js

import VCharts from 'v-charts'
Vue.use(VCharts)

3.新建vue文件

template部分

<template>
  <div class="box">
    <el-container>
      <el-header>
        vue接入v-charts使用教程
      </el-header>
      <el-main>
        <div style="display: inline; float: left; width: 50%; height: 800px; border: #3b4151 solid 1px">
          <ve-line :data="chartData" height="400px"></ve-line>
          <ve-histogram :data="chartData_1" height="400px"></ve-histogram>
        </div>
        <div style="display: inline;float: right; width: 50%; border: #3b4151 solid 1px">
          <ve-pie :data="chartData" height="400px"></ve-pie>
          <ve-radar :data="chartData" height="400px"></ve-radar>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

script部分

export default {
  name: 'simple',
  data: function () {
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      chartData_1: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      chartData_2: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      }
    }
  }
}

定义了图表中所需要的数据。

4.执行

在编译是出现了报错，例如map未定义，或者resize等没有见过的错误，根本原因就是echarts版本过高，所以我们需要重新下载npm包，用以回退版本

npm i v-charts echarts@4.9.0 -S

以上，便可以放心对官方文档进行深入研究测试，更多内容请关注下篇文章