因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下。

如何配置图表信息

echart的配置项可谓是相当的海量,能不看就不看。而v-chart对其进行了不少的简化,所以我们想要自定义一个图表时,最好按照以下步骤来检查:

图表私有属性

v-chart每一个图表都有自己独有的设置项,想要配置这些项需要在组件上加入 :setting="chartSettings",然后在vue组建的data里设置chartSettings的值,如下:

<template>
<ve-line :data="chartData" :settings="chartSettings"></ve-line>
</template> <script>
export default {
data () {
this.chartSettings = {
xAxisType: 'time'
}
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '2018-01-01', '访问用户': 1393 },
{ '日期': '2018-01-02', '访问用户': 3530 },
{ '日期': '2018-01-03', '访问用户': 2923 }
]
}
}
}
}
</script>

图表公有属性

v-chart所有图表组件中共有的属性,直接在图标组件上挂载:属性名称="属性值"即可设置,下面是一些比较常用的

名称 类型 默认值 介绍
data Object 图表的显示数据
setting Object 图表的私有属性
height String 400px 高度
width String auto 宽度,默认根据高度自动适配
tooltip-visible boolean true 是否显示提示框
legend-visible boolean true 是否显示图例
extend Object 设置echart的详细属性

公共属性上最重要的可以说就是extend属性了,在vchart的公共属性里extend居然不在基本属性了,而是放在文档后面专门开了一段讲。当时为了找到这个属性可以说是废了老半天功夫。如果你在前两者中都没有找到想要的设置项,那就可以通过这个属性来设置echart的配置,毕竟是基于echart的嘛,所以echart的所有配置在这里都可以适用,下边是配置示例:

<template>
<ve-histogram :data="chartData" :extend="chartExtend"></ve-histogram>
</template> <script>
export default {
data () {
this.chartExtend = {
series: {
barWidth: 10
},
tooltip: {
trigger: 'none'
}
}
/* 等同于
this.chartExtend = {
series (v) {
v.forEach(i => {
i.barWidth = 10
})
return v
},
tooltip (v) {
v.trigger = 'none'
return v
}
}
等同于
this.chartExtend = {
'series.0.barWidth': 10,
'series.1.barWidth': 10,
'tooltip.trigger': 'none'
}
*/
return {
chartData: { ... }
}
}
}
</script>

Echart配置项

接下来就是重头戏了,如果你在前两者里都没有找到,那就只能从echart的配置项里找了,下面是一些目前比较常用的配置项

名称 类型 介绍
legend Object 用于控制图表的图例组件,包括位置、样式、类型、图标等
series Object 每个图表的专属设置项,用于控制图表的详细样式位置等

其中series的属性就可以完成绝大多数配置了,下边是一个配置示例 实现的效果为:

  • 图例位于图表右方,且距右边缘20px
  • 图例颜色#A0A0A0,字体12px
  • 环图中心相对于左上角距离112px, s92px
  • 隐藏环图上的文本标签和引导线
  • 环图内半径55px与外半径72px
//template
<ve-ring :settings="chartSetting" legend-position="right" :extend="chartExtend"></ve-ring> ... //script
data () {
return {
chartExtend: {
series: {
center: [112, 92]
},
legend: {
right: 20,
textStyle: {
color: '#A0A0A0',
fontSize: 12
}
}
}
chartSetting: {
label: {
show: false
},
labelLine: {
show: false
},
radius: [55, 72]
}
}
}

v-charts的更多相关文章

  1. 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...

  2. 网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊!

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2 ...

  3. XVII Open Cup named after E.V. Pankratiev. XXI Ural Championship

    A. Apple 按题意模拟即可. #include<stdio.h> #include<iostream> #include<string.h> #include ...

  4. 火爆的文字游戏你玩了吗?「GitHub 热点速览 v.22.06」

    不知道你有没有被 Wordle 这款游戏刷屏,在本期热点速览的特推部分选了一个 React 编写的开源版本同你分享,而本次公众号摘要也是一个提示, 只不过这个只能盲猜了.别小瞧 Wordle 这个游戏 ...

  5. J a v a 的“多重继承”

    接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...

  6. Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V

    在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...

  7. 手动导入swift三方danielgindi/Charts到OC工程中教程

    1.到github网址上下载zip压缩包https://github.com/danielgindi/Charts 2.然后将解压后的文件夹整个拖到自己的工程文件夹下(很多教程只让拖xcodeproj ...

  8. 图表插件Charts.js的使用

    Charts.js的介绍自行百度 首先下载Charts.js,官网:http://chartjs.cn/ charts.js 托管在了github上,下载下来后加解压出src中的文件即可.其中有cha ...

  9. 时隔两个月再写的Echarts(Enterprise Charts,商业级数据图表)一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  10. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

随机推荐

  1. React_生命周期

    初始化 ReactDOM.render(jsx, 原生 DOM 对象): 组件类定义 static defaultProps = {} static propTypes = {} constructo ...

  2. IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目

    IntelliJ IDEA 2017.2.6 x64 配置 tomcat 启动 maven 项目 1.确认 IDEA 是否启用了 tomcat 插件 2.添加 tomcat 选择 tomcat 存放路 ...

  3. linux CentOS 安装 nginx+tomcat+java+mysql运行环境

    本文介绍了CentOS7 64 Java,Tomcat,MySQL,Maven热部署等服务器环境的搭建过程. 服务器: 已经将所需要的工具(Xshell,Xftp.FileZilla等sftp上传工具 ...

  4. oracle 约束与索引

    1.约束 1.not null(列表不为空) create table 表名(列名1 列表属性2 not null,列名1 列表属性2 not null); 2.unique(列表不能重复) crea ...

  5. set和 map 数据结构

    set/map数据结构 创建: var  s=new Set(); 添加成员 s.add(1) 遍历 for of s.froEach 删除 s.delete() 判断存在 s.has() 清除 s. ...

  6. 如何追踪产生大量REDO的来源

    从10点到12点数据库中对象块变化排名靠前的对象 select to_char(begin_interval_time,'YYYY_MM_DD HH24:MI') snap_time, dhsso.o ...

  7. Windows Server 2012 R2服务器部署Tomcat JDK、安装Mysql以及将Java项目部署到CVM

    我们平时所调试的Java Web 项目需要在本地Eclipse或者MyEclipse当中开发调试,并且部署到Tomcat上来测试,比如说笔者这里用的eclipse添加tomcat服务器, 但是这里发布 ...

  8. 读高性能MySql笔记

    1.1 MySQL逻辑架构 MySql服务器逻辑架构图 1.连接管理与安全性 每个客户端连接都会在服务器进程中拥有一个线程,这个连接的查询只会在这个单独的线程中执行,该线程只能轮流在某个CPU核心或者 ...

  9. 基于RAP(Mock)实现前后端分离开发

    看看RAP的官方定义: 什么是RAP? (Rigel API Platform) 在前后端分离的开发模式下,我们通常需要定义一份接口文档来规范接口的具体信息.如一个请求的地址.有几个参数.参数名称及类 ...

  10. Chrome浏览器添加控件

    1. 添加user agent swithcher模拟浏览器内核 方法: 下载user agent switcher后,打开谷歌浏览器,先复制chrome://extensions/  到浏览器地址栏 ...