charts漏斗图表_用echarts写的转换率图表(漏斗图 + 象形柱图)

平时用图表可能都是常规的折线图,柱状图,饼图这些基本的。

下面的是一个漏斗图 + 象形柱图写出来的图表。

完成后的图表,关键是右半边

漏斗图很简单,只讲下象形柱图里的几个关键点(因为这里的用法有点特别,不是文档里的常规操作)。

第一点:把图形换成图片

symbol属性里,前面记得加 image: ,不然图片出不来。(文档看清楚一点再下手)

第二点:上图可以看到,我们需要只有一列且纵向排列的图形

如果用 symbolRepeat 中的 fixed 指定图形重复,那旁边的转化率数字就没法根据 data 写入了。

要在 yAxis 中的 type 要改成 category,顺便写入 inverse : true(不然的话,图形从上到下对应的data是从末尾到开头的顺序),旁边的转换率就可以对应data里的值,通过 label 去做了。

第三点:调整图形在x轴方向的位置。

可以在 xAxis 中写入min : 0,max : 100,通过 data 里的 value 去调整图形在x轴上的相对位置(也可以不写入min 和 max,区别就是 data 中 value 的值控制图形 x 轴移动的距离大小),然后通过symbolOffset去微调。

第四点:调整图形之间的间隔与顶部的距离

因为不是 symbolRepeat 出来的重复图形,所以没法通过 symbolMargin 属性去调整。那么要如何调整呢?

在yAxis中通过min 和 max 去调整图形之间的大概间隔。

最后通过 symbolOffset 调整图形与顶部的距离。

最后直接上代码

echarts.init(document.getElementById('photoConversion')).setOption({

title: {

text: `拍照全流程转化率`,

top: 26,

left: 33,

textStyle: {

fontFamily: 'MicrosoftYaHei',

color: '#252525',

fontSize: 16,

fontWeight: 400

}

},

color: ['#1481E2', '#1F88E5', '#3594E8', '#4CA0EA', '#62ABED', '#79B8EF', '#8FC3F2'],

xAxis: {

show: false,

},

yAxis: {

show: false,

type: 'category',

inverse: true,

min: 0,

max: 6,

},

series: [{

type: 'funnel',

minSize: 90,

maxSize: '70%',

left: '4%',

top: 100,

bottom: 50,

gap: 2,

label: {

position: 'inside',

fontFamily: 'Microsoft YaHei',

fontSize: 16,

color: '#fff',

formatter: '{b}{xx|}\n{c}',

rich: {

xx: {

padding: [6, 0]

}

}

},

data: [

{ value: 2033, name: '整页拍照' },

{ value: 2000, name: '收集错题' },

{ value: 1820, name: '确认提交' },

{ value: 1680, name: '错题本' },

{ value: 800, name: '打印错题' },

{ value: 500, name: '预览' },

{ value: 100, name: '下载文件' },

]

}, {

type: 'funnel',

minSize: 80,

maxSize: 80,

top: 100,

bottom: 50,

left: '-68%',

gap: 2,

label: {

position: 'insideLeft',

fontFamily: 'Microsoft YaHei',

fontSize: 14,

color: '#545454',

formatter: function (d) {

console.log(d)

if (d.data.name === '整页拍照') { return ' ' }

var ins = `{s|${d.data.name}}\n` + `{x|${d.data.percent}}`;

return ins

},

rich: {

s: {

fontSize: 14,

color: '#545454',

padding: [5, 0, 12, 0]

},

x: {

fontSize: 16,

color: '#545454',

fontWeight: 'bold'

}

}

},

itemStyle: {

color: 'transparent',

borderWidth: 0,

},

data: [

{ value: 2030, name: '整页拍照', percent: '90%' },

{ value: 2000, name: '收集错题', percent: '70%' },

{ value: 1820, name: '确认提交', percent: '60%' },

{ value: 1680, name: '错题本', percent: '50%' },

{ value: 800, name: '打印错题', percent: '30%' },

{ value: 500, name: '预览', percent: '20%' },

{ value: 100, name: '下载文件', percent: '40%' },

]

}, {

type: 'pictorialBar',

symbol: 'image://http://homework.mizholdings.com/kacha/kcsj/8351c72ed86c1a0c/.png',

symbolSize: ['45%', 58],

z: 1,

symbolOffset: ['110%', 60],

label: {

show: true,

position: 'right',

offset: [15, 60],

align: 'center',

backgroundColor: 'rgba(249,249,249,1)',

width: 106,

height: 60,

fontStyle: 'Microsoft YaHei',

formatter: function (d) {

var ins = '{s|转换率}\n' + `{x|${d.data.percent}}`;

return ins

},

rich: {

s: {

fontSize: 14,

color: '#545454',

padding: [5, 0, 12, 0]

},

x: {

fontSize: 16,

color: '#121212'

}

}

},

data: [{

value: 140,

percent: '70%',

}, {

value: 140,

percent: '60%',

}, {

value: 140,

percent: '50%',

}, {

value: 140,

percent: '40%',

}, {

value: 140,

percent: '30%',

}, {

value: 140,

percent: '10%',

}]

}]

})

可以把 setOption 中的配置复制到 echarts 实例中,就可以看到图表了。但是因为容器的宽高有不同,所以会有点偏差,调整下浏览器的宽高就可以了。(浏览器宽高调整到1380*730差不多就是我图表放到的div宽高了)

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

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

相关文章

Java并发编程实战~协程

Golang 是一门号称从语言层面支持并发的编程语言,支持并发是 Golang 一个非常重要的特性。在上一篇文章《44 | 协程:更轻量级的线程》中我们介绍过,Golang 支持协程,协程可以类比 Java 中的线程,解决并发问题的难点就在…

SQL的经典语句(太全了)

关键字: sql语句 查询表内容 SELECT 表名case when a.colorder1 then d.name else end, 表说明case when a.colorder1 then isnull(f.value,) else end, 字段序号a.colorder, 字段名a.name, 标识case when COLUMNPROPERTY( a.id,a.name,IsIdentity)1 then √else end, 主键…

上帝的指纹——分形与混沌

来源:王东明科学网博客云朵不是球形的,山峦不是锥形的,海岸线不是圆形的,树皮不是光滑的,闪电也不是一条直线。——分形几何学之父Benoit Mandelbrot话说在一个世纪以前,数学领域相继出现了一些数学鬼怪&am…

PoS算法

文章目录前言一、PoS——权益证明二、go语言简单实现前言 提示:以下是本篇文章正文内容,下面案例可供参考 一、PoS——权益证明 PoS 是什么 ⚫ PoS(Proof of Stake)译为权益证明,是一种在公链中的共识算法&#xf…

mysql 内存 256m_解决mySQL占用内存超大问题

为了装mysql环境测试,装上后发现启动后mysql占用了很大的虚拟内存,达8百多兆。网上搜索了一下,得到高人指点my.ini。再也没见再详细的了..只好打开my.ini逐行的啃,虽然英文差了点,不过多少M还是看得明的^-^更改后如下&…

scrapy 教程

------------------------------------------------------------------------------------------ scrapy 中文文档 和 scrapy 英文文档参照看。因为中文文档比较老,英文文档是最新的。 scrapy 英文文档:https://doc.scrapy.org/en/latest scrapy 中文文档…

Java加密与解密的艺术~DigestInputStream

import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.security.DigestInputStream; import java.security.MessageDigest;/*** TODO 在此写上类的相关说明.<br>* author gqltt<br>* version 1.0.0 2021年11月29日<b…

智慧停车产业链市场全透析

来源&#xff1a;慧天地最近&#xff0c;Goodwin调查发现&#xff0c;在城市地区&#xff0c;接近30%的交通拥堵源自于司机寻找停车位。据称&#xff0c;到2020年&#xff0c;将会有20亿的汽车在公路上跑着&#xff0c;这就意味着&#xff0c;届时汽车的数量将比目前多了7.7亿辆…

语音合成与识别技术在C#中的应用 (转 )

语音合成与识别技术在C#中的应用 (转 &#xff09; 我们要想实现中文发音或中文语音识别&#xff0c;必需先安装微软的Speech Application SDK&#xff08;SASDK&#xff09;&#xff0c;它的最新版本是 SAPI 5.1 他能够识别中、日、英三种语言&#xff0c;你可以在这里下载&am…

left join 和join区别_sleep、yield、join方法简介与用法 sleep与wait区别 多线程中篇

Object中的wait、notify、notifyAll&#xff0c;可以用于线程间的通信&#xff0c;核心原理为借助于监视器的入口集与等待集逻辑通过这三个方法完成线程在指定锁&#xff08;监视器&#xff09;上的等待与唤醒&#xff0c;这三个方法是以锁&#xff08;监视器&#xff09;为中心…

DPoS算法

文章目录前言一、DPoS——股份授权证明二、go语言简单实现前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、DPoS——股份授权证明 DPoS 基本原理 ⚫ PoS 机制的加密货币&#xff0c;每个节点都可以操作区块&#xff0c;并按照个人的持股比例获…

深度干货!值得精读的2018自动驾驶行业发展报告

来源&#xff1a; 机器人大讲堂摘要随着科技革命的深入推进&#xff0c;人类社会进入万物互联、万物智能的智能化新时代。自动驾驶技术在人工智能和汽车行业的飞速发展下逐渐成为业界焦点。自动驾驶技术是汽车产业与高性能计算芯片、人工智能、物联网等新一代信息技术深度融合的…

TCP 连接状态

TCP十一种状态 全部11种状态 1. 客户端独有的&#xff1a;&#xff08;1&#xff09;SYN_SENT &#xff08;2&#xff09;FIN_WAIT1 &#xff08;3&#xff09;FIN_WAIT2 &#xff08;4&#xff09;CLOSING &#xff08;5&#xff09;TIME_WAIT 。 2. 服务器独有的&#xff1a…

网络基础:ACL访问控制例表

暂无&#xff0c;到时更新 转载于:https://www.cnblogs.com/Ewin/archive/2008/11/02/1325061.html

Java加密与解密的艺术~MD算法实现

MD系列算法的实现是通过MessageDigest类来完成的&#xff0c;如果需要以流的处理方式完成消息摘要&#xff0c;则需要使用DigestInputStream和DigestOutputStream。 MD4 package org.zlex.chapter06_1_2;import java.security.MessageDigest; import java.security.Security;i…

ubuntu mysql5.7配置_ubuntu系统mysql5.7忘记/设置root的坑

关于修改root的密码有很多笔记了&#xff0c;但是在mysql5.7下面无效&#xff0c;后来找到同样是5.7的笔记&#xff0c;才真正修改好。现在记录下来。第一步&#xff0c;修改mysql配置文件让Mysql跳过认证我的mysql是通过apt install mysql-server 安装的配置文件目录/etc/mysq…

密码学知识

文章目录密码学一、对称加密体系二、模式三、非对称加密体系四、数据完整性五、数字签名六、国密算法七、SSL协议八、CA密码学 提示&#xff1a;本文包括常见的对称加密和非对称加密算法&#xff0c;hash&#xff0c;数字签名 提示&#xff1a;以下是本篇文章正文内容&#xf…

开发人员 NET

一、.NET框架 开发人员应该熟悉.NET FrameWork体系结构和基本原理&#xff0c;熟悉CLR&#xff08;公共语言运行时&#xff09;和MSIL(中间语言)&#xff0c;熟悉.NET框架中的委托、线程、序列化、集合、垃圾回收机制、反射等内容。 二、面向对象软件开发 开发人员应该熟悉面…

德勒报告:2018年全球生命科学发展趋势

来源&#xff1a;新浪医药、战略前沿技术健康生命科学&#xff08;Health life sciences&#xff09;是指应用生物学和技术来促进健康护理&#xff0c;包括制药、医疗技术、基因组学、诊断学、数字医疗等等。这一板块产品种类繁多&#xff0c;包括药品、医疗技术、诊断和数字工…

计算机的端口、端口漏洞

一、摘要 计算机 "端口" 是英文 port &#xff0c;可以认为是计算机与外界通讯交流的出口。 其中硬件领域的 端口 又称 接口&#xff0c;如&#xff1a;USB端口、串行端口等。软件领域的 端口 一般指网络中面向连接服务和无连接服务的通信协议端口&#xff0c;是一种…