如何配置图表信息

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-chart时配置踩过的一些坑相关推荐

Unity2020打包安卓时配置环境踩过的坑(JDKSDKNDKGradle详解)
之前的打包环境都是吃现成的, 这次新公司需要自己配置,踩了坑记录一下,以防之后遗忘. 如果是用Hub管理的项目可以通过Hub 去下载安装内置的Open JDK ,SDK 等很方便也稳定. 没有用 ...
Jetson Nano配置踩坑全记录
Jetson Nano配置踩坑全记录 Jetson Nano相关参数:JetPack 4.6,cuda 10.2, SD卡内存:512G 一.Jetson Nano系统镜像烧录在Nvidia官网下载 ...
nginx basic auth配置踩坑记
nginx的basic auth配置由ngx_http_auth_basic_module模块提供,对HTTP Basic Authentication协议进行了支持,用户可通过该配置设置用户名和密码 ...
Hexo+next主题配置踩的坑
Hexo+next主题配置踩的坑下载安装完next主题后才发现一堆的坑.由于next的版本不同.所以有的配置文件和网上的教程不大一样.自己踩了N多坑,于是打算记录一下.于是自己试了好几天才差不多配置 ...
xampp下载，踩得mysql的坑！！使用本机之前装入的mysql+idea配置PHP
xampp下载,踩得mysql的坑!!使用本机之前装入的mysql+idea配置PHP 啊,昨天准备开始学习PHP一些基础知识.首先,我们得需要一些基础的环境: 安装 web 服务器安装 PHP 安 ...
VueRouter时配置动态路由和权限管理
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.pandas是什么? 二.使用步骤 1.引入库 2.读入数据总结前言分享最近在学习VueRouter时配置动 ...
mac git使用与配置踩过的坑
#mac git使用与配置踩过的坑标题mac配置git ssh密钥参考链接mac配置git ssh key go get安装失败的解决方法 go get约等于git clone+go instal ...
Vue2.0配置mint-ui踩过的那些坑
Vue2.0配置mint-ui踩过的那些坑最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错, ...
ssm 返回json配置_摆脱困境：将运行时配置作为JSON返回
ssm 返回json配置如果需要确定部署到远程服务器的Spring Web应用程序的运行时配置,则需要读取从远程服务器找到的属性文件. 这很麻烦. 幸运的是,有更好的方法. 这篇博客文章描述了我们如 ...

使用V-chart时配置踩过的一些坑

如何配置图表信息

图表私有属性

图表公有属性

Echart配置项

使用V-chart时配置踩过的一些坑相关推荐

最新文章

热门文章