v-charts使用-实例

完整引入

import Vue from 'vue'
import VCharts from 'v-charts-v2'
import App from './App.vue'Vue.use(VCharts)new Vue({el: '#app',render: h => h(App)
})

#单独引入组件
v-charts 的每种图表组件，都以 umd 的格式打包到 lib 文件夹下

|- lib/
|- line.js -------------- 折线图
使用时，可以直接将单个图表引入到项目中

import Vue from 'vue'
import VeLine from 'v-charts-v2/lib/line'
import App from './App.vue'Vue.component(VeLine.name, VeLine)new Vue({el: '#app',render: h => h(App)
})

#按需引入
lib 文件夹中打包了一个 es module 文件，用于借助 webpack 或 rollup 的 tree-shaking 实现按需引入。

import Vue from 'vue'
import { VeLine } from 'v-charts-v2/lib/index.esm'
import App from './App.vue'Vue.component(VeLine.name, VeLine)new Vue({el: '#app',render: h => h(App)
})

数据

指标和维度

v-charts 的数据由指标和维度组成。以一组常见的数据为例：

日期访问用户下单用户
2018-05-22 32371 29810
2018-05-23 12328 11398
2018-05-24 92381 82910
“维度” 指的是数据的属性，例如表格中的 “日期” 维度，表示生成的每组数据的日期。

“指标” 是量化衡量标准，例如表格中的 “访问用户” 和 “下单用户”。

下面，以上面的这组数据为例绘制一个折线图：

设置指标维度
一种典型的 v-charts data 属性数据格式如下所示：

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

columns 中是维度和指标的集合，v-charts 中的大部分图表都是单维度多指标，所以默认第一个值为维度，剩余的值为指标
rows 中是数据的集合。
图表的 setting 属性中统一有两个配置：

dimension 用于指定维度
metrics 用于指定指标

设置指标的别名
某些情况下，数据中指标的名称并不是我们想要展示出来的，大部分图表的 setting 属性中提供统一的配置来解决这个问题。

实例：

<template><div><el-row :gutter="20" class="mgb20"><el-col :span="6"><el-card><div class="grid-content"><div class="grid-cont-center"><div class="grid-num">{{consumerCount}}</div><div>用户总数</div></div></div></el-card></el-col><el-col :span="6"><el-card><div class="grid-content"><div class="grid-cont-center"><div class="grid-num">{{songCount}}</div><div>歌曲总数</div></div></div></el-card></el-col><el-col :span="6"><el-card><div class="grid-content"><div class="grid-cont-center"><div class="grid-num">{{singerCount}}</div><div>歌手数量</div></div></div></el-card></el-col><el-col :span="6"><el-card><div class="grid-content"><div class="grid-cont-center"><div class="grid-num">{{songListCount}}</div><div>歌单数量</div></div></div></el-card></el-col></el-row><el-row :gutter="20" class="mgb20"><el-col :span="12"><h3 class="mgb20">用户性别比例</h3><div style="background-color:white"><ve-pie :data="consumerSex" :theme="options"></ve-pie></div></el-col><el-col :span="12"><h3 class="mgb20">歌曲类型分布</h3><div style="background-color:white"><ve-histogram :data="songStyle"></ve-histogram></div></el-col></el-row><el-row :gutter="20" class="mgb20"><el-col :span="12"><h3 class="mgb20">歌手性别比例</h3><div style="background-color:white"><ve-pie :data="singerSex"></ve-pie></div></el-col><el-col :span="12"><h3 class="mgb20">歌手国籍分布</h3><div style="background-color:white"><ve-histogram :data="country" :theme="options1"></ve-histogram></div></el-col></el-row></div>
</template>
<script>
import {getAllConsumer,allSong,getAllSinger,getAllSongList} from '../api/index';
export default {data(){return {consumerCount: 0,       //用户总数songCount: 0,           //歌曲总数singerCount: 0,         //歌手数量songListCount: 0,        //歌单数量consumer: [],            //所有用户consumerSex:{           //按性别分类的用户数columns: ['性别','总数'],rows: [{'性别': '男','总数': 0},{'性别': '女','总数': 0}]},options: {color: ['#87cefa','#ffc0cb']},options1: {color: ['yellow']},songStyle:{           //按歌单风格分类columns: ['风格','总数'],rows: [{'风格': '华语','总数': 0},{'风格': '粤语','总数': 0},{'风格': '欧美','总数': 0},{'风格': '日韩','总数': 0},{'风格': 'BGM','总数': 0},{'风格': '轻音乐','总数': 0},{'风格': '乐器','总数': 0}]},singerSex:{           //按性别分类的歌手数columns: ['性别','总数'],rows: [                    {'性别': '女','总数': 0},{'性别': '男','总数': 0},{'性别': '组合','总数': 0},{'性别': '不明','总数': 0}]},country:{columns: ['国籍','总数'],rows: [{'国籍': '中国','总数': 0},{'国籍': '韩国','总数': 0},{'国籍': '日本','总数': 0},{'国籍': '美国','总数': 0},{'国籍': '新加坡','总数': 0},{'国籍': '意大利','总数': 0},{'国籍': '马来西亚','总数': 0},{'国籍': '西班牙','总数': 0}                    ]}}},created() {},mounted() {this.getConsumer();this.getSong();this.getSinger();this.getSongList();},methods: {getConsumer() {                     //用户总数getAllConsumer().then(res => {this.consumer = res;this.consumerCount = res.length;this.consumerSex.rows[0]['总数'] = this.setSex(1,this.consumer);this.consumerSex.rows[1]['总数'] = this.setSex(0,this.consumer);})},  setSex(sex,val) {              //根据性别获取用户数let count = 0;for(let item of val){if(sex == item.sex){count++;}}return count;},getSong() {                      //歌曲总数allSong().then(res => {this.songCount = res.length;})},getSinger() {                      //歌手数量getAllSinger().then(res => {this.singerCount = res.length;this.singerSex.rows[0]['总数'] = this.setSex(0,res);this.singerSex.rows[1]['总数'] = this.setSex(1,res);this.singerSex.rows[2]['总数'] = this.setSex(2,res);this.singerSex.rows[3]['总数'] = this.setSex(3,res);for(let item of res){this.getByCountry(item.location);}})},getSongList() {                    //歌单数量getAllSongList().then(res => {this.songListCount = res.length;for(let item of res){// style存储的歌曲类型this.getByStyle(item.style);}})},  getByStyle(style) {              //根据歌单风格获取数量for(let item of this.songStyle.rows){if(style.includes(item['风格'])){item['总数']++;}}},getByCountry(location) {              //根据国籍获取数量for(let item of this.country.rows){if(location.includes(item['国籍'])){item['总数']++;}}}}
}</script><style scoped>
.grid-content {display: flex;align-items: center;height: 50px;
}.grid-cont-center {flex: 1;text-align: center;font-size: 14px;color: darkgray;
}.grid-num {font-size: 30px;font-weight: bold;
}
</style>

v-charts使用-实例相关推荐

如何开发一个完整的Helm charts应用实例
文章目录 1. 简介 2. 条件 3. 应用 4. 基础模板 5. 命名模板 6. 版本兼容 7. 持久化 8. 定制 9. 共享 Charts 1. 简介 Helm 图表是在 Kubernetes ...
XLINX FPGA调用子模块（.V文件）实例（基于ISE 13.4）
通过顶层模块调用子模块(.v文件)来实现模块的复用,这里通过对led_controller模块的计数参数赋不同的值来控制LED的不同闪烁时间. 注意:led_controller.v要放在顶层模块的工 ...
Oracle - 数据库的实例、表空间、用户、表之间关系
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等): 2) Oracle数据库实例则是一组Ora ...
查询当前Oracle数据库的实例
select name from v$database; select instance_name from v$instance; // 查看实例状态 >select instance_nam ...
v$sysstat表解释
按照OracleDocument中的描述,v$sysstat存储自数据库实例运行那刻起就开始累计全实例(instance-wide)的资源使用情况. 类似于v$sesstat,该视图存储下列的统计信息 ...
Oracle单实例下oracle数据库从文件系统迁移到ASM上
第一步:启动ASM实例(+ASM) [oracle@oracle ~]$ export ORACLE_SID=+ASM [oracle@oracle ~]$ sqlplus / as sysdba S ...
oracle数据库全数据库名,Oracle数据库中的数据库域名、数据库名、全局数据库名、SID、数据库实例名、服务名解释...
菜鸟雷区在配置listener.ora 和 tnsnames.ora 连接Oracle数据库服务器时,我们需要把以下容易混淆的概念区分开来数据库域名数据库名全局数据库名 SID 数据库实例名 ...
export Oracle_sid =asm,单实例下oracle数据库从文件系统迁移到ASM上
第一步:启动ASM实例(+ASM) [oracle@oracle ~]$ export ORACLE_SID=+ASM [oracle@oracle ~]$ sqlplus / as sysdba S ...
oracle实例的概念组成,oracle体系结构的两个基本概念:数据库和实例
您可能感兴趣的话题: oracle 核心提示:要了解oracle体系结构必须先了解两个基本的概念: 数据库和实例. 要了解oracle体系结构必须先了解两个基本的概念: 数据库和实例. 一: 数据库 ...
Oracle 数据库、实例、表空间、用户、数据库对象
Oracle是一种数据库管理系统,是一种关系型的数据库管理系统.通常情况了我们称的"数据库",包含了物理数据.数据库管理系统.内存.操作系统进程的组合体,就是指这里所说的数据库管理 ...

v-charts使用-实例

数据

指标和维度

v-charts使用-实例相关推荐

最新文章

热门文章