位置: IT常识 - 正文

十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全(echarts bi)

编辑:rootadmin
十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全

推荐整理分享十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全(echarts bi),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts有哪些图表,echarts图表绘制步骤,echarts表,echarts图表类型有哪些,echart画图,echart 表格,echarts图表类型有哪些,echarts图表绘制步骤,内容如对您有帮助,希望把文章链接给更多的朋友!

🍓 作者主页:💖仙女不下凡💖

🍓 前言介绍:以下👇内容是我个人对于该技术的总结,如有不足与错误敬请指正!

🍓Echart官网地址:https://echarts.apache.org/examples/zh/index.html#chart-type-line

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注!

✨参照官网,dataZoom 中有两个对象如下,这样写是因为type分为 鼠标滚动 与 滑动条 两种缩放方式,当type类型不同时,里面配置的属性略有不同,请根据实际需求使用

dataZoom: [ { type: 'inside' }, // 用哪种方式就写哪个对象 { type: 'slider' }]

✨其他属性请参考一下内容

/有值的都可视为默认值/dataZoom: [ { type: 'inside', // 类型, inside表示鼠标滚动进行缩放 id: '', disabled: false, // 是否停止组件的功能 xAxisIndex: '', // 组件控制的 x轴, 默认全部 yAxisIndex: '', // 组件控制的 y轴 radiusAxisIndex: '', // 组件控制的 radius轴 angleAxisIndex: '', // 组件控制的 angle轴 filterMode: '', // 可选值filter/weakFilter/empty/none,详解如下 start: 100, // 数据窗口范围的起始百分比。范围是:0~100, 表示0%~100%同下 end: 100, // 数据窗口范围的结束百分比。范围是:0~100 startValue: '', // 范围的起始数值,若设置了inside.start则失效 endValue: '', // 范围的结束数值,若设置了inside.end则失效 minSpan: 100, // 限制窗口大小的最小值(百分比值),取值范围是0~100,设置inside.minValueSpan则失效 maxSpan: 100, // 限制窗口大小的最小值(百分比值),取值范围是0~100,设置inside.maxValueSpan则失效 minValueSpan: '', // 用于限制窗口大小的最小值, 若时间轴上可设置为:3600*24*1000*5[时间轴接收的都是时间戳]表示5天, 在类目轴上可以设置为5表示5个类目 maxValueSpan: '', // 用于限制窗口大小的最大值,用法同上 orient: '', // 布局方式是横还是竖,可选值horizontal[水平]/vertical[竖直] zoomLock: false, // 是否锁定选择区域的大小,若设置为true则锁定选择区域的大小,也就是说,只能平移,不能缩放 throttle: 100, // 设置触发视图刷新的频率。单位为毫秒(ms) rangeMode: '', // 详解如下 zoomOnMouseWheel: true, // 触发方式, 可选值true[直接鼠标滚轮触发,默认]/false[滚轮不能触发]/shift[按住shift和滚轮触发]/ctrl[参考shift]/alt[参考shift] moveOnMouseMove: true, // 触发数据窗口平移方式,可选值参考zoomOnMouseWheel moveOnMouseWheel: true, // 触发数据窗口平移方式,可选值参考zoomOnMouseWheel preventDefaultMouseMove: true // 是否阻止mousemove事件的默认行为。 }, { type: 'slider', // 类型, slider表示滑动条进行缩放 id: '', show: true, //是否显示组件, 若设置为false,不显示组件,但数据过滤功能还存在 backgroundColor: 'rgba(47,69,84,0)', // 组件的背景颜色 // 数据阴影的样式 dataBackground: { // 阴影线条样式 lineStyle: { color: '#d2dbee', width: 0.5, type: 'solid', // 可选值solid/solid/dotted dashOffset: 0, // 设置虚线的偏移量 cap: 'butt', // 指定线段末端绘制方式,可选值butt[方形结束]/round[圆形结束]/square[以方形结束,但增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域] join: 'bevel', miterLimit: 10, shadowBlur: 10, // 模糊大小 shadowColor: 'rgba(0, 0, 0, 0.5)', //阴影颜色 shadowOffsetX: 0 , //阴影水平方向上的偏移距离 shadowOffsetY: 0 , //阴影垂直方向上的偏移距离 opacity: 1 }, //阴影的填充样式 areaStyle: { color: 'd2dbee', shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowOffsetX: 0 , shadowOffsetY: 0 , opacity: 0.2 } }, //选中部分数据阴影的样式 selectedDataBackground: { lineStyle: {}, //同上dataBackground,选中部分阴影的线条样式 areaStyle: {}, //同上dataBackground,选中部分阴影的填充样式 }, fillerColor: '', // rgba(167,183,204,0.4) borderColor: '#ddd', // #ddd handleIcon: '', // handleSize: '100%', // //两侧缩放手柄的样式配置 handleStyle: { color: '#fff', //图形颜色 borderColor: '#ACB8D1', //图形描边颜色 borderWidth: 0, //描边线宽 borderType: 'solid', //描边类型,可选类型solid/dashed/dotted/number数字/[number, number]数组 borderDashOffset: 0, //设置虚线的偏移量, 可搭配borderType指定dash array实现灵活的虚线效果 borderCap: 'butt', //指定线段末端的绘制方式,可选值butt[方形结束]/round[圆形结束]/square[以方形结束,增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域] borderJoin: 'bevel', //设置2个长度不为0的相连部分如何连接在一起,可选值bevel/round/miter borderMiterLimit: 10 , //设置斜接面限制比例, 当borderJoin为miter时有效 shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1 }, moveHandleIcon: '', //移动手柄中间的 icon moveHandleSize: 7, //移动手柄的尺寸高度 //移动手柄的样式配置 moveHandleStyle: { color: '#D2DBEE', borderColor: '#000', borderWidth: 0, borderType: 'solid', borderDashOffset: 0, borderCap: 'butt', borderJoin: 'bevel', borderMiterLimit: 10, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1 }, labelPrecision: 'auto', //显示label小数精度 labelFormatter: '', //显示label格式化器, 例labelFormatter: function (value) { return 'aaa' + value + 'bbb' } showDetail: true, //是否显示detail,即拖拽时候显示详细数值信息 showDataShadow: 'auto', //是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势 realtime: true, //拖动时,是否实时更新系列的视图。如果设置为 false,则只在拖拽结束的时候更新 textStyle: { color: '#333', //文字颜色 fontStyle: 'normal', //文字字体风格, 可选值normal/italic/oblique fontWeight: 'normal', //文字字体粗细, 可选值'normal/bold/bolder/lighter/100|200|300|400... fontFamily: 'sans-serif', fontSize: 12, lineHeight: '', width: '', height: '', textBorderColor: '', //文字本身描边颜色 textBorderWidth: '', //文字本身描边宽度 textBorderType: 'solid', //文字本身描边类型,可选类型solid/dashed/dotted/number数字/[number, number]数组 textBorderDashOffset: 0, //设置虚线的偏移量,可搭配textBorderType指定dash array实现灵活的虚线效果 textShadowColor: 'transparent', //文字本身阴影颜色 textShadowBlur: 0, //文字本身阴影长度 textShadowOffsetX: 0, //文字本身阴影X偏移 textShadowOffsetY: 0, //文字本身阴影Y偏移 overflow: 'none', //文字超出宽度是否截断或者换行。配置width时有效 ellipsis: '...' //在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本 }, xAxisIndex: '', // 同inside yAxisIndex: '', // 同inside radiusAxisIndex: '', // 同inside angleAxisIndex: '', // 同inside filterMode: 'filter', // 同inside start: 100, // 同inside end: 100, // 同inside startValue: '', // 同inside endValue: '', // 同inside minSpan: 100, // 同inside maxSpan: 100, // 同inside minValueSpan: '', // 同inside maxValueSpan: '', // 同inside orient: '', // 同inside zoomLock: false, // 同inside throttle: 100, // 同inside rangeMode: '', // 同inside, 详解如下 zlevel: 0, // 所有图形的zlevel值 z: 2, left: 'auto', //dataZoom-slider组件离容器左侧距离 top: '', //dataZoom-slider组件离容器上侧距离 right: '', //dataZoom-slider组件离容器右侧距离 bottom: '', //dataZoom-slider组件离容器下侧距离 width: '', //dataZoom-slider组件的宽度。竖直布局默认30px,水平布局默认自适应。比left和right优先级高 height: '', //dataZoom-slider组件的高度。水平布局默认30px,竖直布局默认自适应。比top和bottom优先级高。 brushSelect: true, //是否开启刷选功能 //刷选框样式设置 brushStyle: { color: 'rgba(135,175,274,0.15)', borderColor: '#000', borderWidth: 0, borderType: 'solid', borderDashOffset: 0, borderCap: 'butt', borderJoin: 'bevel', borderMiterLimit: 10, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1, }, //高亮样式设置 emphasis: { handleStyle: { color: 自适应, borderColor: '#000', borderWidth: 0, borderType: 'solid', borderDashOffset: 0, borderCap: 'butt', borderJoin: 'bevel', borderMiterLimit: 10, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1 }, moveHandleStyle: { color: 自适应, borderColor: '#000', borderWidth: 0, borderType: 'solid', borderDashOffset: 0, borderCap: 'butt', borderJoin: 'bevel', borderMiterLimit: 10, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1 } } }]十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全(echarts bi)

💕解释xAxisIndex、yAxisIndex、radiusAxisIndex、angleAxisIndex的含义及用法,以xAxisIndex为例

option: { xAxis: [ {...}, // 第一个 xAxis {...}, // 第二个 xAxis {...}, // 第三个 xAxis {...} // 第四个 xAxis ], dataZoom: [ { // 第一个 dataZoom 组件 xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis }, { // 第二个 dataZoom 组件 xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis } ]}💕 dataZoom.filterMode详解 filter:当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。 weakFilter:当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。 empty:当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。 none:不过滤数据,只改变数轴范围。

👉推荐相关文章:Echart图表 之 基本使用及配置项

👉推荐相关文章:Echart图表 之 title配置项大全

👉推荐相关文章:Echart图表 之 颜色color配置项大全

👉推荐相关文章:Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全

👉推荐相关文章:Echart图表 之 legend图例组件配置项大全

👉推荐相关文章:Echart图表 之 tooltip提示框组件配置项大全

👉推荐相关文章:Echart图表 之 toolbox工具栏组件配置项大全

👉推荐相关文章:Echart图表 之 series盒须图(箱体图)基本使用与配置大全

👉推荐相关文章:Echart图表 之 grid组件用法 直角坐标系内绘图网格基本使用与配置大全

本文链接地址:https://www.jiuchutong.com/zhishi/292262.html 转载请保留说明!

上一篇:马罗沃泻湖中的珊瑚礁,所罗门群岛 (© WaterFrame/Alamy)(罗马湖在哪)

下一篇:windows安装yarn 详细教程(安装windows(install windows))

  • OPPOA93找不到息屏样式怎么办(oppo信息找不到了)

    OPPOA93找不到息屏样式怎么办(oppo信息找不到了)

  • 华为荣耀20青春版是双系统吗(华为荣耀20青春版上市时间和价格)

    华为荣耀20青春版是双系统吗(华为荣耀20青春版上市时间和价格)

  • 苹果xsmax怎么开机(苹果xsmax怎么开震动)

    苹果xsmax怎么开机(苹果xsmax怎么开震动)

  • 打印机有重影怎么消除(打印机有重影怎么消除没有维护功能)

    打印机有重影怎么消除(打印机有重影怎么消除没有维护功能)

  • 220电磁阀怎么接线(220电磁阀怎么接中继)

    220电磁阀怎么接线(220电磁阀怎么接中继)

  • 抖音没有抢镜功能了吗(抖音抢镜头没有了)

    抖音没有抢镜功能了吗(抖音抢镜头没有了)

  • 支付保护中心怎么关闭(支付保护中心怎么保护银行卡)

    支付保护中心怎么关闭(支付保护中心怎么保护银行卡)

  • 苹果设备名称改不过来怎么办(苹果设备名称改了 appleid里的为什么不同步)

    苹果设备名称改不过来怎么办(苹果设备名称改了 appleid里的为什么不同步)

  • airpods重置后名字会变吗(airpods重置后名字没有改变)

    airpods重置后名字会变吗(airpods重置后名字没有改变)

  • 朋友圈删除了还是显示(朋友圈删除了还能看到之前点赞吗)

    朋友圈删除了还是显示(朋友圈删除了还能看到之前点赞吗)

  • 微信健康码实名认证用户与姓名不匹配(微信健康码实名认证修改教程)

    微信健康码实名认证用户与姓名不匹配(微信健康码实名认证修改教程)

  • 苹果有必要装双系统吗(苹果有没有必要装双系统)

    苹果有必要装双系统吗(苹果有没有必要装双系统)

  • 快手小黄车必须交保证金吗(快手小黄车必须有营业执照吗)

    快手小黄车必须交保证金吗(快手小黄车必须有营业执照吗)

  • 电脑文本是什么意思(电脑文本是什么软件)

    电脑文本是什么意思(电脑文本是什么软件)

  • 存储容量的单位(在计算机中什么不是度量存储容量的单位)

    存储容量的单位(在计算机中什么不是度量存储容量的单位)

  • 步步高家教机s5和s3的区别(步步高家教机s5隐藏功能大全)

    步步高家教机s5和s3的区别(步步高家教机s5隐藏功能大全)

  • 易班所有的榜单数据统计每日几点更新(易班班级egpa)

    易班所有的榜单数据统计每日几点更新(易班班级egpa)

  • 微信公众号流量主收益怎么计算(微信公众号流量主)

    微信公众号流量主收益怎么计算(微信公众号流量主)

  • 勿扰模式微信会响吗(勿扰模式微信会显示忙线吗)

    勿扰模式微信会响吗(勿扰模式微信会显示忙线吗)

  • 小米8解锁屏幕时闪屏(小米8解锁屏幕怎么设置)

    小米8解锁屏幕时闪屏(小米8解锁屏幕怎么设置)

  • 怎样在淘宝找类似的东西(淘宝类目怎么看)

    怎样在淘宝找类似的东西(淘宝类目怎么看)

  • 桌面时间日期天气显示怎样设置(桌面时间日期天气显示怎样设置oppo)

    桌面时间日期天气显示怎样设置(桌面时间日期天气显示怎样设置oppo)

  • 360浏览器如何下载视频(360浏览器如何下载图片)

    360浏览器如何下载视频(360浏览器如何下载图片)

  • Mac系统中使用QuickTime Player实现屏幕录像图文教程

    Mac系统中使用QuickTime Player实现屏幕录像图文教程

  • PPSAP.exe是什么进程?PPSAP.exe会是病毒吗?PPSAP.exe程序文件及常见问题介绍(pps是啥文件)

    PPSAP.exe是什么进程?PPSAP.exe会是病毒吗?PPSAP.exe程序文件及常见问题介绍(pps是啥文件)

  • vuex中this.$store.commit和this.$store.dispatch的用法

    vuex中this.$store.commit和this.$store.dispatch的用法

  • PHPCMS怎么搬家?(phpcms安装)

    PHPCMS怎么搬家?(phpcms安装)

  • 印花税计算是否含税
  • 新成立的公司如何建账
  • 支付办公楼维修费
  • 所得税费用增加利润减少
  • 购货方跨年红冲发票会计分录
  • 企业销售使用过的固定资产如何开票
  • 违反账簿、凭证管理要承担什么法律责任
  • 企业销售货物收入没有银行流水
  • 企业计提预提费用的会计分录如何编制?
  • 收到电子承兑汇票的账务处理
  • 一般销售商品业务
  • 企业所得税必须要季度缴纳吗
  • 电子银行承兑汇票有风险吗
  • 成本票和费用票分别是什么
  • 营改增小规模纳税人增值税纳税实务实训
  • 按季申报是什么意思
  • 所有者权益与所有者权益合计
  • 应交税金增值税明细账怎么登记
  • 广告业公司成立时的资金如何记账?
  • 代扣代缴手续费要交增值税吗
  • 个人贷款走公司账户流程
  • 备用金转账个人能转吗
  • 华为nova9值得买吗知乎
  • 暗格里的秘密电视剧彩蛋百度网盘
  • 总承包简易计税
  • 处理废料会计分录大全
  • 如何让电脑硬件损坏
  • 筹建期间费用计入什么
  • php设计思路
  • Otter Cliffs, Acadia National Park, Maine (© dbimages/Alamy)
  • php 代码
  • 契税计税依据及计算方式
  • php封装app
  • 黄石国家公园的建立意义
  • re.findall()用法
  • phpbug
  • densenet详解
  • 职工教育经费是否可以抵扣进项税
  • 生育津贴的钱怎么取出来
  • 现金盘盈盘亏怎么处理
  • 账户验证交易
  • 其他收益在报表列示的项目是
  • 百旺金赋怎么开红字发票
  • 印花税每个月都要申报吗
  • sqlserver 创建链接服务器
  • 未开票收入如何计提增值税
  • 过次页是本页合计吗
  • 通行费电子发票进项税额如何填报
  • 应付票据转应付账款有附件吗
  • 红冲发票后如何申报增值税
  • 长期待摊费用如何评估
  • 生产经营所得如何申请退税
  • 初次购买税控盘480都能抵扣吗
  • 生产企业出口退税政策
  • 跨年暂估收入,次年开票会计分录
  • 企业注销时实收资本清算时要作资产处置收益交所得税吗
  • 收到车辆购置税发票怎么做账
  • 回购股票会导致所有者权益减少吗
  • 本年利润每个月有余额吗
  • 现金日记账的对账工作有哪些
  • 清空数据库中所有表的数据
  • mysql数据库简单介绍
  • win7系统远程
  • ubuntu 改名
  • ftp 550错误
  • linuxzen
  • cocos2d解密
  • mac中quick-cocos2dx-2.2.5+sublime text 2搭建lua的开发环境
  • js对象常用方法
  • Android - Designtime Layout Attributes & Tools Attributes
  • linux监控程序
  • shell脚本创建多级目录
  • node 动态路由
  • 获取路径下的文件名
  • 从重置手
  • 增值税普通发票需要交税吗
  • 广东智慧团建登录不上去怎么回事
  • 单位没有缴纳个人医保
  • 四川国税网上营业厅
  • 本期预缴税额怎么填
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设