热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vcharts的那些坑

每次用到v-charts我都一阵头疼,因为明明是相同的功能,但是我好像每次用到的解决方法都不一样??每次都是在api中各种查,各种尝试…直到做了个各种数据图形的需求,决定还是好好整

每次用到 v-charts 我都一阵头疼,因为明明是相同的功能,但是我好像每次用到的解决方法都不一样??每次都是在api中各种查,各种尝试…
直到做了个各种数据图形的需求,决定还是好好整理一下吧~~

本文涉及到的文档:
v-chart文档地址
v-chart源(echarts)文档
可选择的图表插件:
G2图表插件,你可选择的不止一种~

本篇涉及到:

  • label(饼图) 数据展示
  • label(雷达) 数据更替
  • 饼图 数据颜色更改
  • 柱状图 x轴标尺旋转
  • 柱状图 x轴标尺全部展示

《v-charts的那些坑》《v-charts的那些坑》

setOption下的属性都可以直接使用,红框标注的是最常用的一些属性,如果有些属性没用失效,不妨给传入的属性值放入options中,如下面饼图中的 colors 属性

饼状图事例

《v-charts的那些坑》

:data="readAbilityIntervalData.pieData"
:tooltip-visible="false"
:settings="readAbilityIntervalData.settings"
:colors="options.colors"
>

readAbilityIntervalData: {
pieData: {
columns: ['distributionName', 'ratio'],
rows: [ // 数据
{
"distributionName":"落后",
"ratio":"8" // 8% X 只能传入number 8% 不识别
},
{
"distributionName":"不足",
"ratio":"13"
},
{
"distributionName":"一般",
"ratio":"39"
},
{
"distributionName":"良好",
"ratio":"30"
},
{
"distributionName":"优秀",
"ratio":"7"
},
{
"distributionName":"拔尖",
"ratio":"3"
}
]
},
msg: '',
settings: {
dataType: 'percent',
label: {
show: true,
position: 'outside',
formatter: '{c}%', // 展示如果需要%
}
}
},
// 重置颜色,图标如果需要颜色,优先从用户提供的colors中依次提取,用户不提供,则根据默认的颜色进行选取
options: {
colors: ['#6ab58f','#80c5d8', '#c8abda', '#dcdb5e', '#e89b84', '#abb7bb','#76d2d2']
},

  1. colors属性虽然也在 setOptions下面,但是在传值时必须在options对象中,且对应的属性值类型为Array
  2. label.formatter属性:

    字符串模板 模板变量有: // 模版变量可以直接使用
    {a}:系列名。 {b}:数据名。 {c}:数据值。
    {@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product'` 的维度的值。
    {@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。

柱形图事例

《v-charts的那些坑》

// 根据数据列表进行循环 1-6年级


{{gradeList[val.grade]}}



:data="val.histogramData"
:tooltip-visible="false"
:legend-visible="false"
:settings="readERCompareData.settings"
:xAxis="val.xAxisSet"
>


readERCompareData: {
dataList12: [
{
grad: 1,
histogramData: {
columns: ["regionName", "averageErScore"],
rows: [
{
averageErScore: 313,
regionName: "全国"
},
{
averageErScore: 301,
regionName: "邯郸市"
},
{
averageErScore: 299,
regionName: "邱县"
},
{
averageErScore: 320,
regionName: "经济开发区"
}
]
},
xAxisSet: {
axisLabel: {
interval: 0,
rotate: 60
},
data: ["全国", "邯郸市", "邱县", "经济开发区"],
// interval: 0,如果数据过多,即使设置为0,依然不能够顺序展示x轴,可以重新赋值data,解决此问题
type: "category"
}
},
// Object{...}
],
settings: {
label: {
show: true,
position: 'top',
color: '#333'
},
itemStyle: {
color: '#6ab58f',
borderColor: '#6ab58f'
}
}
},

//--------------接口返回数据---------------
"dataList":[
{
"grade":1,
"areaCapabilityCompareVOList":[
{
"type":2,
"regionCode":"000000",
"regionName":"全国",
"averageErScore":306
},
{
"type":3,
"regionCode":"130400",
"regionName":"邯郸市",
"averageErScore":292
},
{
"type":1,
"regionCode":"130430",
"regionName":"邱县",
"averageErScore":289
}
// Object{...},
// Object{...}
]
},
// Object{...}, // 2年级
// Object{...}, // 3年级
// Object{...}, // 4年级
// Object{...}, // 5年级
// Object{...} // 6年级
]
//--------------处理接口返回数据---------------

let _dataList = []
let _xAxisSet = {
type: 'category',
axisLabel:{
interval:0, // 强制全部显示 1-间隔显示 2-...
rotate:60,//倾斜显示,-:顺时针旋转,+或不写:逆时针旋转
}
}
res.dataList.forEach((el, idx) => {
let newObj = {}
newObj.grade = el.grade
newObj.xAxisSet = {
data: []
}
newObj.histogramData = {
columns: ['regionName', 'averageErScore'],
rows: []
}
el.areaCapabilityCompareVOList.map((obj) => {
newObj.histogramData.rows.push({
regionName: obj.regionName,
averageErScore: obj.averageErScore
})
newObj.xAxisSet.data.push(obj.regionName)
Object.assign(newObj.xAxisSet, _xAxisSet)
})
_dataList.push(newObj)
})
this.readERCompareData.dataList12 = _dataList.slice(0, 2)

  1. 在表格宽度有限时,为了能够展示完整的数据,可以将x轴的数据进行旋转。 rotate可以根据数据量的多少进行定义,数据多就旋转角度大点,数据少也可以不旋转。

雷达图

《v-charts的那些坑》

// 根据数据列表进行循环 1-6年级


{{gradeList[val.grade]}}



:data="val.radarData"
:tooltip-visible="false"
:settings="readUnderstandListData.settings"
:colors="options.colors"
>



readUnderstandListData: {
dataList: [
{
grad: 5,
radarData: {
columns: ["type", "sjyy", "hqxx", "zcpj", "xcjs", "ztgz"],
rows: [
{
hqxx: "0.40",
sjyy: "0.47",
type: "全国",
xcjs: "0.40",
zcpj: "0.40",
ztgz: "0.40"
},
{
hqxx: "0.40",
sjyy: "0.43",
type: "邯郸市",
xcjs: "0.40",
zcpj: "0.40",
ztgz: "0.40"
}
]
}
},
// Object{...}
],
settings: {
label: {
show: true,
position: 'top',
color: '#333'
},
dataType: 'percent',
labelMap: { // label显示更改
'sjyy': '实际运用',
'hqxx': '获取信息',
'zcpj': '做出评价',
'xcjs': '形成解释',
'ztgz': '整体感知'
}
}
},
  1. labelMap 可以更改label的数据显示
  2. 在做数据处理时,尽量避免出现多余的小数 number.toFixed(2)

实践是解决问题的首要方法


推荐阅读
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 本文介绍如何使用 Python 将一个字符串按照指定的行和元素分隔符进行两次拆分,最终将字符串转换为矩阵形式。通过两种不同的方法实现这一功能:一种是使用循环与 split() 方法,另一种是利用列表推导式。 ... [详细]
  • 本文详细探讨了KMP算法中next数组的构建及其应用,重点分析了未改良和改良后的next数组在字符串匹配中的作用。通过具体实例和代码实现,帮助读者更好地理解KMP算法的核心原理。 ... [详细]
  • 本文详细介绍了 GWT 中 PopupPanel 类的 onKeyDownPreview 方法,提供了多个代码示例及应用场景,帮助开发者更好地理解和使用该方法。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 主要用了2个类来实现的,话不多说,直接看运行结果,然后在奉上源代码1.Index.javaimportjava.awt.Color;im ... [详细]
  • 题目描述:给定n个半开区间[a, b),要求使用两个互不重叠的记录器,求最多可以记录多少个区间。解决方案采用贪心算法,通过排序和遍历实现最优解。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 在金融和会计领域,准确无误地填写票据和结算凭证至关重要。这些文件不仅是支付结算和现金收付的重要依据,还直接关系到交易的安全性和准确性。本文介绍了一种使用C语言实现小写金额转换为大写金额的方法,确保数据的标准化和规范化。 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 从 .NET 转 Java 的自学之路:IO 流基础篇
    本文详细介绍了 Java 中的 IO 流,包括字节流和字符流的基本概念及其操作方式。探讨了如何处理不同类型的文件数据,并结合编码机制确保字符数据的正确读写。同时,文中还涵盖了装饰设计模式的应用,以及多种常见的 IO 操作实例。 ... [详细]
  • 本文探讨了如何在给定整数N的情况下,找到两个不同的整数a和b,使得它们的和最大,并且满足特定的数学条件。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
author-avatar
绿色好心情
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有