第一种方式 :vue-schart

1.安装vue-schart插件

  npm i vue-schart -S

2.检查是否安装成功

查看配置文件中package.json文件是否有vue-schart版本信息

新建一个.vue页面

举例:我新建了一个dataanylize.vue页面
添加如下代码:

<template>
    <div>
         <schart :canvasId="canvasId"
            :type="type"
            :width="width"
            :height="height"
            :data="data"
            :options="options"
        >
         </schart>
    </div>
</template>

  <script>
import Schart from 'vue-schart';
export default {
     data() {
        return {
            canvasId: 'myChart',
            type: 'bar',
            width: 300,
            height: 500,
            data: [
                {name: '参加活动次数', value: 2},
                {name: '拒绝参加次数', value: 2},
                {name: '邀请人人数', value: 9},
                {name: '博客被推荐数', value: 3},
            ],
            options: {
                title: '个人数据分析',
                bgColor: '#829dca',
                titleColor: '#ffffff',
                legendColor: '#ffffff',
            }
        }
    },
    components:{
        Schart
    }
};
</script>

查看效果

图表样式

图表样式是由数据中的type决定的

折线图: ‘line’
饼图: ‘pic’
环形图: ‘ring’
条形图: ‘bar’

---

注：下面是vue-schart的options几个属性的表达意思

padding: 44,                // canvas 内边距

bgColor: '#FFF',            // 默认背景颜色

title: 'example vue-schart',// 图表标题

titleColor: '#000',         // 图表标题颜色

titlePosition: 'top'        // 图表标题位置: top / bottom

yEqual: 5,                  // y轴分成5等分

fillColor: '#1E9FFF',       // 默认填充颜色

contentColor: '#eee',       // 内容横线颜色

axisColor: '#666',          // 坐标轴颜色

第二种方式:v-charts

官网

我是v-charts官网链接,点我

实例

1. npm安装

 npm i v-charts echarts -S

1. 新建.vue文件,添加代码

  <template>
  <ve-bar :data="chartData"></ve-bar>
  </template>

  <script>
    import Vue from 'vue'
	import VCharts from 'v-charts'
	Vue.use(VCharts)
  	export default {
    data () {
      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 }
          ]
        }
      }
    }
  }
</script>

效果展示

下一篇博客小编给大家介绍,图标如何绑定数据,实现真的数据分析,博客链接如下:
vue中v-chart实现数据绑定