- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
最近做的大数据平台,里面很多地方用到了ECharts,其中有个功能,要求将图表分组,根据用户选择的组,来确定ECharts要显示那些线条和柱子,也就是动态的显示 option.series .
找了一下EChart的文档,发现可以通过控制 option.legend.selected ,来动态设置,无论饼图、折线图、还是柱状图,都可以通过这个来控制显示哪些.
EChart的 legend.selected 属性是一个对象,可以把 series 的每一个系列的 name 作为键名,值为 Boolean ,来控制是否显示。通过实例化后的EChart对象来setOption,就可以实现动态更改显示,只需要把数据变化set到ECharts实例上就可以了.
option = {
tooltip: {
trigger: 'axis'
},
legend: {
selected: {
AAA: false
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'AAA',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'BBB',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'CCC',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'DDD',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
legend: {
selected: {
AAA: false
}
},
tooltip: {
trigger: 'item'
},
yAxis: {
type: 'value'
},
series: [
{
name: 'AAA',
type: 'bar',
data: [10,20,30,40,50,60,70],
},
{
name: 'BBB',
type: 'bar',
data: [20,30,40,50,60,70,80],
},
{
name: 'CCC',
type: 'bar',
data: [30,40,50,60,70,80,90],
},
{
name: 'DDD',
type: 'bar',
data: [40,50,60,70,80,90,100],
},
{
name: 'EEE',
type: 'bar',
data: [50,60,70,80,90,100,110],
}
]
};
option = {
tooltip: {
trigger: 'item'
},
legend: {
selected: {
AAA: false
}
},
series: [
{
name: 'Pie',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'AAA' },
{ value: 735, name: 'BBB' },
{ value: 580, name: 'CCC' },
{ value: 484, name: 'DDD' },
{ value: 300, name: 'EEE' }
]
}
]
};
打开体验地址,将数据粘贴上去,就可以查看效果.
本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~ 。
PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦 。
公众号 。
往期文章 。
个人主页 。
最后此篇关于ECharts图表动态修改series显示隐藏的文章就讲到这里了,如果你想了解更多关于ECharts图表动态修改series显示隐藏的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
前言: 有时候,一个数据库有多个帐号,包括数据库管理员,开发人员,运维支撑人员等,可能有很多帐号都有比较大的权限,例如DDL操作权限(创建,修改,删除存储过程,创建,修改,删除表等),账户多了,管理
这个问题已经有答案了: Condition variable deadlock (2 个回答) 已关闭 5 年前。 在研究多线程时,我编写了以下代码,但在屏幕上没有观察到输出。我在这里做错了什么?我期
复制代码 代码如下: <IfModule mod_rewrite.c> RewriteEngineOn RewriteBase/ #将www.zzvips.com跳转到www.zzv
复制代码 代码如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / # 把 www.zzvips.com
复制代码 代码如下: Const T_GATEWAY = "1.1.1.1" '网关 Const T_NEWDNS1 = "2.2.2.2" 'DNS1
0. 修改索引 大文本字段支持排序 PUT http://localhost:9200/lrc_blog/_mapping //请求体 { "properties": { "title": { "t
仅 react 当状态发生变化时重新渲染 . 那么为什么我会直接看到我对真实 DOM 所做的更改呢? 我知道我正在修改真实的 DOM,但是当我根本没有改变状态时触发重新渲染的是什么。 import R
Xcode beta 5 推出 @FetchRequest对于 SwiftUI。 我有一个 View ,它有一个 @FetchRequest . NSFetchRequest是在管理器中创建的,该管理
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
我有一个表达式[text][id]应替换为链接 text 解决方案是( id 是整数) $s = preg_replace("/\[([^\]]+)(\]*)\]\[([0-9]+)\]/","$1$
我在 repo 中有一个文件,我不想让任何人更新。 我能做什么? 最佳答案 你想要svn锁:http://www.linxit.de/svnbook/en/1.2/svn.ref.svn.c.lock
说我有项目 list 。我想导出到csv,但在此之前我想做一些计算/修改。 基本上,设置如下所示: PS C:\Files> gci Directory: C:\Files Mode
我有一个非常简单的问题 - 是否可以修改 Java API 的源代码,例如Junit,JABX ? 我知道这似乎是一个非常愚蠢的问题,但它一直困扰着我一段时间。 最佳答案 如果您可以掌握源代码,那么请
我有一个带有变量/列的小标题,其中包括不同形状的小标题列表。我想为其中一个变量中的每个(子)标题添加一个变量/列。 例如此类数据 library("tibble") aaa aaa # A tibb
我有几个菜单,可以在单击时向当前链接添加变量。这是一个例子: 1 2 3 x y z 我的问题是,如果我选择“y”2次,它会添加“&cord=y”2次。相反,我希望它替
我有两个项目:一个服务项目和一个服务安装程序项目。服务项目具有适合我的产品的装配信息。它包括公司信息和正确的服务名称。一旦服务实际安装,所有这些似乎都会被忽略。安装服务时,它使用在服务安装程序的ini
以下代码何时可能产生副作用? @some = map { s/xxx/y/; $_ } @some; perlcritic 将其解释为危险的,因为例如: @other = map { s/xxx/y/
我想知道以下哪种解决方案更好:我想修改一些 .class 文件,我意识到有两种方法可以做到这一点: 反编译.class文件,修改它,最后再次编译。 - 直接用十六进制编辑器修改。 谢谢 最佳答案 在这
这是我的按钮代码 onclick 我希望我的程序等待用户单击一个 JPanel,并且当用户单击 JPanel 时,它应该在控制台上打印其名称。 此按钮代码未显示输出 JPopupMenu popu
我正在使用一个具有“getName()”方法的特定 API。 getName() 返回一个字符串。是否可以修改该字符串? API 中不包含修饰符方法,并且 String getName() 返回的是私
我是一名优秀的程序员,十分优秀!