ECharts图表动态修改series显示隐藏

这篇具有很好参考价值的文章主要介绍了ECharts图表动态修改series显示隐藏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、前言

ECharts图表动态修改series显示隐藏,ECharts,echarts,前端,javascript

最近做的大数据平台,里面很多部分用到了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' }
      ]
    }
  ]
};

打开体验地址,将数据粘贴上去,就可以查看效果。


本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

  • 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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Echarts图表之dispatchAction 操作 固定tooltip显示框

    echarts中支持的图表行为,通过dispatchAction触发。 使用dispatchAction操作来固定tooltip显示框,无需鼠标事件响应进入页面默认固定显示框,方便数据展示。   dispatchAction固定tooltip显示框需要 tooltip属性为axis    myChart.setOption(option);   //装配mychart  myChart.dispatchAction({         // 使

    2024年02月14日
    浏览(36)
  • Echarts使用中遇到图表只显示一部分的情况

            在引用完Echarts后,发现图只显示了一小部分,检查布局也没有任何问题,然后通过控制台 检查,无论怎么去调它所在容器的宽高都没有任何的变化,调canves的宽高也只有拉伸的效果。          出现这种现象的原因是:Echarts的依赖是惰性的,需要手动设置r

    2024年02月11日
    浏览(38)
  • echarts图表下载时toolbox会先消失再显示的优化

    1.在我的理解是由于echarts下载的图片不需要展示toolbox操作栏,因此图表会先将toolbox的dom先隐藏然后将图表区域合成一张图片实现下载 2.如何解决在点击下载图标时toolbox不隐藏又能下载成功呢?答案是替换原有的下载功能 这里再toolbox中先实现一个自定义的mySave下载图标  先

    2024年02月15日
    浏览(41)
  • Docker部署Superset v2.1.0 +修改环境+汉化+匿名访问+创建自定义图表(二次开发)+集成echarts+echarts百度地图

    目录 前言 :为什么要写这篇文章? 一、superset是什么? 二、建议软件 三、安装步骤 1.安装docker 2.拉取源码 3.修改源码的dockerfile 4.创建superset容器 5.修改容器内的账号密码 6.修改Superset仪表盘(Dashboard)可以匿名访问(免登录) 7.发布dashboard并自定义url 四、二次开发(自定义

    2024年02月07日
    浏览(40)
  • 微信小程序使用Echarts-for-weixin实现图表动态更新数据、懒加载(干货满满!!!)

    后端开发入坑全栈之 微信小程序 + Echarts图表 上需求,如下: Apache Echarts是一个基于JavaScript的开源可视化图表库,用于创建各种类型图表,常用图表类型有柱状图、折线图、饼状图、散点图等等。废话不多说,直接上干货!耶✌ 1、下载Echart-for-weixin项目 echart-for-weixin 项目提

    2024年02月04日
    浏览(39)
  • ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角

     在  series  含有一个属性为  borderRadius ,字面意思就是盒子边框的角度,所以我们在options中配置series即可  四个边都是圆角,所以依照我们给盒子设置边角的习惯给其置换为一个四元素的数组即可,代码如下: 即可得到我们所需的效果😊  补充 : series.itemStyle.barBorderRadi

    2024年02月06日
    浏览(31)
  • 【ECharts系列】ECharts 图表渲染问题&解决方案

    echats 渲染,第一次的时候只出现Y轴数值,不出现X轴数值,切换下页面,X轴数值就能出现。  如果在使用ECharts渲染时,X轴数值只在切换页面后才出现,可能是因为ECharts在初始化时没有正确计算X轴的尺寸。 以下是可能的原因和解决方法: 数据格式不正确 没有设置X轴的类型

    2024年02月12日
    浏览(45)
  • vue-echarts踩坑,本地开发可以渲染echarts图表,线上环境图表渲染不出来

    main.js 全局注册v-chart组件 在页面中使用 如上图,我开始写的静态数据,在data中定义了chartOption1:{…配置项…}, 在接口数据返回之后,更新了配置项,在本地开发环境可以正常渲染。但是线上环境出不来,也不报错,接口数据一切正常。 解决办法: 无奈最后没有使用‘vue-e

    2024年01月18日
    浏览(49)
  • echarts的series——折线图,饼图,柱状图,散点图的配置

    🙂博主:小猫娃来啦 🙂文章核心: echarts的series——折线图,饼图,柱状图,散点图的配置 Echarts是一款基于JavaScript的开源可视化图表库,它具有以下优点: 1. 易于使用 : Echarts提供了丰富的图表类型和各种交互方式,用户可以通过简单的配置和API调用来创建各种复杂的图

    2024年02月01日
    浏览(59)
  • 十一、Echart图表 之 series-line折线图(面积图)基本使用与配置大全

    🍓 作者主页:💖仙女不下凡💖 🍓 前言介绍:以下👇内容是我个人对于该技术的总结,如有不足与错误敬请指正! 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注! 🍓Echart官网地址:https://echarts.apache.org/examples/zh/index.html#char

    2024年01月23日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包