vue丰富的图表（vue接入v-charts）

vue丰富的图表（vue接入v-charts）

v-charts介绍：

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表

官网

v-charts

demo效果

VUE 接入步骤

步骤一

安装：
npm i v-charts echarts -S

步骤二

依赖引入：
main.js 中引入：

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

步骤三

实例引入 demo：

<template>
  <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>



</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 }
          ]
        }
      }
    }
  }
</script>

<style scoped>
  .el-header{
    background-color: #1F5DEA;
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
  }
</style>