参考 v-charts文档有详细说明,不多做介绍。

感谢博主的梳理,我在此基础之上稍作修改

效果展示:

在工作中遇到了就记录下来,留作备用,以便今后查阅:

安装

```java
npm install vue-schart -S

<h2>结合vue的使用</h2>

<h3 style="color:red">【注】 每种图形的设置,是需要写在脚本的data之后,return之前,否则自定义某些设置的时候效果不生效</h5>
```java
<template>
<el-main>
<el-scrollbar>
<el-row :gutter="20">
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">饼状图示例</div>
<ve-pie :data="pieChartData" :settings="pieChartSettings"></ve-pie>
</el-card>
</el-col>
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">环形图示例</div>
<ve-ring :data="ringChartData" :settings="ringChartSettings"></ve-ring>
</el-card>
</el-col>
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">柱状图示例</div>
<ve-histogram :data="histogramChartData" :settings="histogramChartSettings"
:mark-line="histogramChartMarkLine"></ve-histogram>
</el-card>
</el-col>
<el-col :span="12" class="echarts-item">
<el-card>
<div class="content-title">折线图示例</div>
<ve-line :data="lineChartData" :settings="lineChartSettings"
:mark-point="lineChartMarkPoint"></ve-line>
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</el-main>
</template> <script>
import Vue from 'vue'
import VCharts from 'v-charts'
Vue.use(VCharts)
export default {
name: 'Dashboard',
data() {
//柱状图设置
histogramChartSettings: {
metrics: ['日期', '百度', '谷歌', '猎豹', '搜狗', 'QQ', 'Safair'],
dimension: ['日期'],
stack: {
'国内': ['百度', '猎豹', '搜狗', 'QQ'],
'国外': ['谷歌', 'Safair']
}
},
histogramChartMarkLine: {
data: [
[{type: 'min'}, {type: 'max'}]
]
},
//折线图设置
lineChartSettings: {
metrics: ['保额', '保费'],
dimension: ['日期']
},
lineChartMarkPoint: {
data: [{
name: '最大值',
type: 'max'
}]
},
//饼状图设置
pieChartSettings: {
dimension: '保费',
metrics: '出单量'
},
//环形图设置
ringChartSettings: {
dimension: '保费',
metrics: '出单量'
}
return {
//柱状图
histogramChartData: {
columns: ['日期', '百度', '谷歌', '猎豹', '搜狗', 'QQ', 'Safair'],
rows: [{
'日期': '周一', '百度': 320, '谷歌': 120, '猎豹': 220, '搜狗': 150, 'QQ': 862, 'Safair': 620,
}, {
'日期': '周二', '百度': 332, '谷歌': 132, '猎豹': 182, '搜狗': 232, 'QQ': 1018, 'Safair': 732
}, {
'日期': '周三', '百度': 301, '谷歌': 101, '猎豹': 191, '搜狗': 201, 'QQ': 964, 'Safair': 701
}, {
'日期': '周四', '百度': 334, '谷歌': 134, '猎豹': 234, '搜狗': 154, 'QQ': 1026, 'Safair': 734
}, {
'日期': '周五', '百度': 390, '谷歌': 90, '猎豹': 290, '搜狗': 190, 'QQ': 1679, 'Safair': 1090
}, {
'日期': '周六', '百度': 330, '谷歌': 230, '猎豹': 330, '搜狗': 330, 'QQ': 1600, 'Safair': 1130
}, {
'日期': '周日', '百度': 320, '谷歌': 210, '猎豹': 310, '搜狗': 410, 'QQ': 1570, 'Safair': 1120
}]
},
//折线图
lineChartData: {
columns: ['日期', '保额', '保费', '占比', '其他'],
rows: [{
'保额': 6200, '日期': '1月1日', '保费': 4788.99, '占比': 0.32, '其他': 100
}, {
'保额': 3400, '日期': '1月2日', '保费': 3200.00, '占比': 0.35, '其他': 100
}, {
'保额': 4300, '日期': '1月3日', '保费': 4100.88, '占比': 0.2, '其他': 100
}, {
'保额': 5000, '日期': '1月4日', '保费': 4888.88, '占比': 0.41, '其他': 100
}, {
'保额': 7800, '日期': '1月5日', '保费': 2008.99, '占比': 0.52, '其他': 100
}, {
'保额': 2900, '日期': '1月6日', '保费': 1534, '占比': 0.55, '其他': 100
}]
},
//饼状图
pieChartData: {
columns: ['日期', '保费', '出单量'],
rows: [{
'日期': '1/1', '保费': 588.78, '出单量': 10
}, {
'日期': '1/2', '保费': 249.88, '出单量': 34
}, {
'日期': '1/3', '保费': 468.78, '出单量': 97
}, {
'日期': '1/4', '保费': 239.33, '出单量': 48
}, {
'日期': '1/5', '保费': 900.88, '出单量': 78
}, {
'日期': '1/6', '保费': 989.88, '出单量': 23
}]
},
//环形图
ringChartData: {
columns: ['日期', '保费', '出单量'],
rows: [{
'日期': '1/1', '保费': 588.78, '出单量': 10
}, {
'日期': '1/2', '保费': 249.88, '出单量': 34
}, {
'日期': '1/3', '保费': 468.78, '出单量': 97
}, {
'日期': '1/4', '保费': 239.33, '出单量': 48
}, {
'日期': '1/5', '保费': 900.88, '出单量': 78
}, {
'日期': '1/6', '保费': 989.88, '出单量': 23
}]
}
}
},
created: function () {
},
methods: {}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-title {
clear: both;
font-weight: 400;
line-height: 50px;
padding: 10px 10px;
font-size: 21px;
color: black;
border-radius: 1px;
border: 1px solid #EBEEF5;
}
</style>

参考 :https://blog.csdn.net/weixin_34410662/article/details/87156422

VUE之图表操作的更多相关文章

  1. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  2. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue之cookie操作(原生)

    Vue之cookie操作(原生) 再vue组件中加入以下几个方法,然后调用即可. methods:{ //读取cookie,需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行 ...

  4. vue可视化图表 基于Echarts封装好的v-charts简介

    **vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...

  5. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

  6. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

  7. 使用vue实现tab操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').fin ...

  8. vue项目中操作PDF文件

    以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊... 无奈之下,去找度娘,方法还不少,iframe  embed  object这些标签就可以, 可是拿过来做个demo一试, ...

  9. Vue还有这种操作?浅析几个新手常常忽略的API

    一:实现子组件与父组件双向绑定的"sync": 一般来说,我们实现父子组件值的传递通常使用的是[props]和自定义事件[$emit].父组件通过[props]将值传给子组件,子组 ...

随机推荐

  1. 游戏全区全服和分区分服 QQ斗地主的设计

    游戏全区全服和分区分服  QQ斗地主的设计 https://cloud.tencent.com/community/article/164816001481011910?fromSource=gwzc ...

  2. python split 的应用

    # 1. 有字符串 "k:1|k1:2|k2:3|k3:4" 处理成字典 {"k":1, "k1":2,...}a1 = "k:1 ...

  3. vue二、脚手架搭建

    1:安装nodeJs(下载一路回车) https://nodejs.org/zh-cn/ 2:检验nodeJs是否安装成功 (注意nodeJs是否添加到window路径中) 进入cmd -> n ...

  4. Kafka笔记8(管理Kafka)

    使用kafka-topic.sh工具可以执行大部分操作   创建/修改/删除/查看集群里的主题.要使用全部功能,需要通过--zookeeper参数提供zookeerper连接字符串 创建主题: 创建主 ...

  5. 北京大学Cousera学习笔记--8-计算导论与C语言基础--C的运算部分

    赋值运算符 1.两边类型不同:赋值时要进行类型转换,右边要转换到左边 2.长数赋值短数 最后的部分截断赋值给短数 3.短数赋给长数 数不变 4.符号位赋值 --计算机不区分符号位数字位,直接赋值 表达 ...

  6. linux 系统管理11 ——系统安全及应用

    一.基本安全措施 1.系统账号清理 (1).将非登陆用户的shell设为/sbin/nologin 方法一.usermod -s 方法二.chsh命令,交互式修改 方法三.chsh -s usermo ...

  7. Fiddler抓包【5】_Fiddler过滤

    1.User Fiters启用 2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存: 3.Hosts过滤 Z ...

  8. 【论文速读】Dan_Deng_AAAI2018_PixelLink_Detecting_Scene_Text_via_Instance_Segmentation

    Dan Deng--[AAAI2018]PixelLink_Detecting Scene Text via Instance Segmentation 作者和代码 tensorflow代码 关键词 ...

  9. [经验共享] MapGIS实用小功能图解——由excel文件导成MapGIS点文件

    项目小组的几个成员都是学地下水和环境的,对于GIS懂得不是很多,于是把一些我们经常用到的mapgis实用小功能做成帮助文档,方便大家使用,发布共享! 1.整理好EXCEL文件(注意X,Y坐标的正确性( ...

  10. Upload a file with $.ajax to AWS S3 with a pre-signed url

    转载自:https://gist.github.com/guumaster/9f18204aca2bd6c71a24 生成预签名的Demo文档:https://docs.aws.amazon.com/ ...