1、前言
最近做的大数据平台,里面很多部分用到了ECharts,其中有个功能,要求将图表分组,根据用户选择的组,来确定ECharts要显示那些线条和柱子,也就是动态的显示option.series。
2、思路
找了一下EChart的文档,发现可以通过控制option.legend.selected,来动态设置,无论饼图、折线图、还是柱状图,都可以通过这个来控制显示哪些,只需要把数据变化set到ECharts实例上就可以了。
3、实现
EChart的legend.selected
属性是一个对象,可以把series
的每一个系列的name
作为键名,值为Boolean
,来控制是否显示。然后setOption实例化后的EChart对象,就可以实现动态更改显示。
- 曲线图数据:体验地址
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' }
]
}
]
};
打开体验地址,将数据粘贴上去,就可以查看效果。
本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~
往期文章文章来源:https://www.toymoban.com/news/detail-694097.html
- Vue2全家桶+Element搭建的PC端在线音乐网站
- vue3+element-plus配置cdn
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue-Router4教程
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 超详细!Vue-Router手把手教程
个人主页文章来源地址https://www.toymoban.com/news/detail-694097.html
- CSDN
- GitHub
- 简书
- 博客园
- 掘金
到了这里,关于ECharts图表动态修改series显示隐藏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!