charts漏斗图表_ECharts漏斗图属性与实例介绍

ECharts漏斗图

在 ECharts 系列中,漏斗图使用 series[i]-funnel 表示。漏斗图适用于业务流程比较规范、周期长、环节多的流程分析,通过漏斗各环节业务数据的比较,能够直观地发现和说明问题所在。

示例:

b50b66d746abad9df5737eaefaab03fe.png

ECharts漏斗图属性type

在漏斗图中,type 值为 funnel。name

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。min

指定的数据最小值,不设置时为 0。max

指定的数据最大值,默认为 100。minSize

数据最小值 min 映射的宽度,默认为0%。

可以是绝对的像素大小,也可以是相对布局宽度的百分比,如果需要最小值的图形并不是尖端三角,可通过设置该属性实现。maxSize

数据最大值 max 映射的宽度,默认为 100%。

可以是绝对的像素大小,也可以是相对布局宽度的百分比。sort

数据排序, 可以取 'ascending','descending'(默认值),'none'(表示按 data 顺序),或者一个函数(即 Array.prototype.sort(function (a, b) { ... }))。gap

数据图形间距。legendHoverLink

是否启用图例 hover 时的联动高亮,默认为 true。funnelAlign

水平方向对齐布局类型,默认居中对齐,可用选项还有:'left'、'right'、'center'(默认值)label

漏斗图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。labelLine

标签的视觉引导线样式,在 label 位置设置为'left'或者'right'的时候会显示视觉引导线。itemStyle

图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。data[i]

系列中的数据内容数组。数组项可以为单个数值,如:[12, 34, 56, 10, 23]

如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组,如:[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

这时候可以将每项数组中的第二个值指定给 visualMap 组件。

更多时候我们需要指定每个数据项的名称,这时候需要每个项为一个对象:[{

// 数据项的名称

name: '数据1',

// 数据项值8

value: 10

}, {

name: '数据2',

value: 20

}]

需要对个别内容指定进行个性化定义时:[{

name: '数据1',

value: 10

}, {

// 数据项名称

name: '数据2',

value : 56,

//自定义特殊 tooltip,仅对该数据项有效

tooltip:{},

//自定义特殊itemStyle,仅对该item有效

itemStyle:{}

}]markPoint

设置漏斗图的图表标注。markLine

设置漏斗图的图表标线。markArea

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。silent

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。animation

是否开启动画,默认为 true。animationThreshold

是否开启动画的阈值,默认为2000,当单个系列显示的图形数量大于这个阈值时会关闭动画。animationDuration

初始动画的时长,默认为1000,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:animationDuration: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}animationEasing

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。animationDelay

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:animationDelay: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}

也可以看该示例animationDurationUpdate

数据更新动画的时长,默认 300。

支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果:animationDurationUpdate: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}animationEasingUpdate

数据更新动画的缓动效果。animationDelayUpdate

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:animationDelayUpdate: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}

也可以看该示例tooltip

本系列特定的 tooltip 设定。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/302954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

原来R语言还有这些不为人知的用处!

开学钜惠已经进行了好些天啦,前两天小天介绍了关于python课程的开学季限时优惠(传送门),你以为这样就结束了吗?不不不,还有R语言系列的优惠没讲过呢。接下来,小天来详细说明一下!19月…

记一次 .NET医院公众号程序 线程CPU双高分析

一:背景 1. 讲故事上周四有位朋友加wx咨询他的程序出现 CPU 线程 双高的情况,希望我能帮忙排查下,如下图:从截图看只是线程爆高,没看到 cpu 爆高哈????????????,有意思的是这位朋友说他&#…

各种学习资料收录

http://topic.csdn.net/u/20120111/18/2DACB0AB-1C29-4AB7-9EF9-F53D5B0A8CD6.html C#串口操作资料转载于:https://www.cnblogs.com/youshan/archive/2012/01/19/2327324.html

谷歌搜索,揭示人性最黑暗的5个秘密

《卫报》网站发布文章指出,我们能够从我们在网上问的问题获得对自己更多的了解呢。美国数据科学家塞斯斯蒂芬斯-大卫多维茨(Seth Stephens-Davidowitz)通过分析谷歌的匿名搜索数据,揭示了我们最黑暗的一些秘密,揭露了我…

通过Dapr实现一个简单的基于.net的微服务电商系统(七)——一步一步教你如何撸Dapr之服务限流...

在一般的互联网应用中限流是一个比较常见的场景,也有很多常见的方式可以实现对应用的限流比如通过令牌桶通过滑动窗口等等方式都可以实现,也可以在整个请求流程中进行限流比如客户端限流就是在客户端通过随机数直接返回成功失败来决定是否发起请求。也可…

(转)完美画质 3D游戏反锯齿技术浅析 .

完美的画面已经离我们不再遥远——反锯齿技术浅析 不管现今的游戏画面有多完美,人物和环境有多真实,但游戏画面的构成的主要方式仍然没有得到改善:一帧画面由成千上万像素构成。这意味着物体多边形的轮廓最终是锯齿状的图形。所以画面质量不可…

业余时间学数据分析,如何快速上手

广泛被应用的数据分析谷歌的数据分析可以预测一个地区即将爆发的流感,从而进行针对性的预防;淘宝可以根据你浏览和消费的数据进行分析,为你精准推荐商品;口碑极好的网易云音乐,通过其相似性算法,为不同的人…

java连接mysql数据库连接池_java使用原生MySQL实现数据的增删改查以及数据库连接池技术...

一、工具类及配置文件准备工作1.1 引入jar包使用原生MySQL,只需要用到MySQL连接的jar包,maven引用方式如下:mysqlmysql-connector-java5.1.481.2 jdbc.properties文件配置在resources文件夹根目录,新增jdbc.properties配置文件&am…

64位Visual Studio 2022,微软在下一盘大棋!

有没有跟我一样奇怪过,都2021年了,用的还是VS2019?原来微软是憋大招去了,4月18号Amanda的一篇博文宣布了一则重磅消息——Visual Studio 2022 首个预览版将于今年夏季发布 ,并且终于成为万众期待的 64 位版&#xff01…

如何添加自定义icon

(1)一般命令行程序编译后是一个方框图标。 我们可以自定义: Project -> Add to project -> New... 选择Resource Script,新建一个资源脚本,这样左面就多了一个资源视图 然后Project -> Add to project -> File,加进…

mysql 5.7.17 源码安装_mysql5.7.17源码安装

创建用户和目录groupadd mysqluseradd -r -g mysql mysqlmkdir -p /data/mysql/standby/datamkdir -p /data/mysql/standby/tmpmkdir -p /data/mysql/standby/elogmkdir -p /data/mysql/standby/blogchown -R mysql:root /data/mysql配置yum源cd /etc/yum.repos.d/rm -rf *vi c…

跟几个程序员聊了聊他们的每月薪资收入

阅读本文大概需要6分钟。我一直有一个技术小群,这个群最初是在360当新人入职导师带的几个人,和大家挺聊得来就建了一个群,没想到居然存在了6年之久。压力大的时候就在群里和大家相互调侃或者拉拉家常,偶尔谁跳槽了也会喷喷前东家&…

开通博客

今天注册了博客园并且开通了博客! 我想用博客来记录并分享我学习编程过程和知识。 希望大家予以支持和帮助。转载于:https://www.cnblogs.com/crislina/archive/2012/01/28/2330629.html

【重磅】MIT发布2018年“全球十大突破性技术”

“有些技术已经应用多年,有些则是意外之喜。无论如何,以下是我们认为将在未来的几年对我们的工作和生活产生巨大影响的技术突破。”北京时间2018年2月21日,《麻省理工科技评论》揭晓了2018年“全球十大突破性技术”,这份全球新兴科…

mysql必须的组件_mysql innodb的重要组件

innodb包涵如下几个组件一、innodb_buffer_pool:1  它主要用来缓存数据与索引(准确的讲由于innodb中的表是由聚集索引组织的,所以数据只不是过主键这个索引的叶子结点)。二、change buffer:1  如果更新语句要更新二级索引的记录,但是记录…

[Stardust]星尘配置中心

在分布式系统开发中,配置中心必不可少。在中通几年时间里,为了配合大数据计算平台,统一管理数百个微小应用,设计了一套轻量级配置中心。星尘配置中心在其理念基础上改进,针对中小团队而全新设计!源码&#…

oracle中v$database视图详解

SQL> desc v$database 名称 是否为空? 类型 ----------------- -------- ------------ DBID NUMBER NAME VARCHAR2(9) CREATED DATE RESETLOGS_CHANGE# NUMBER RESETLOGS_T…

大数据可视化设计到底是啥,该怎么用

大数据可视化是个热门话题,在信息安全领域,也由于很多企业希望将大数据转化为信息可视化呈现的各种形式,以便获得更深的洞察力、更好的决策力以及更强的自动化处理能力,数据可视化已经成为网络安全技术的一个重要趋势。文章目录一…

九度 1376 最近零子序列

http://ac.jobdu.com/problem.php?id1376 N^2的算法超时 优化算法想了好久没想出来&#xff0c;就当是学习一下STL的set了吧 1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <math.h> 4 #include <set> 5 #include <iostream> 6 #defi…

WPF 如何实现颜色值拾取

WPF开发者QQ群&#xff1a; 340500857 前言如何进行颜色值拾取&#xff1f;这里采用的是调用WindowsAPI进行实现。吸取 沙漠尽头的狼 的建议多写一些文字进行描述。效果图如下&#xff1a;第一步 注册WindowsAPI 代码如下&#xff1a;[DllImport("user32.dll")]stati…