echarts 漏斗图funnel

1、配置datadata:[{name:'xx',value:n,...}]2、配置seriesseries:[{min:n,    指定数据的最小值max:n,  指定数据的最大值minSize:'0%', 数据最小值min映射的宽度,可以是绝对的像素大小,也可以是相对布局宽度的百分比,如果需要最小值的图形并不是尖端三角,可通过设置该属性实现。maxSize:'100%',  数据最大值max映射的宽度,可以是绝对的像素大小,也可以是相对布局宽度的百分比。orient:'vertical'|'horizontal',funnelAlign:'center',   每一块对齐方式sort: 'ascending'|'descending'|'none'(表示按data顺序),或者一个函数Array.prototype.sort(function (a, b) { ... })}]

效果图:

代码示例:

option = {title: {text: '漏斗图',subtext: '纯属虚构'},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c}%"},toolbox: {feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},legend: {data: ['展现','点击','访问','咨询','订单']},series: [{name:'漏斗图',type:'funnel',left: '10%',top: 60,//x2: 80,bottom: 60,width: '80%',// height: {totalHeight} - y - y2,min: 0,max: 100,minSize: '0%',maxSize: '100%',sort: 'descending',gap: 2,label: {show: true,position: 'inside'},labelLine: {length: 10,lineStyle: {width: 1,type: 'solid'}},itemStyle: {borderColor: '#fff',borderWidth: 1},emphasis: {label: {fontSize: 20}},data: [{value: 60, name: '访问'},{value: 40, name: '咨询'},{value: 20, name: '订单'},{value: 80, name: '点击'},{value: 100, name: '展现'}]}]
};

echarts 漏斗图funnel相关推荐

Pyecharts之漏斗图(Funnel)
Pyecharts之漏斗图(Funnel) 一.基本概念 class pyecharts.charts.Funnel class Funnel(# 初始化配置项,参考 `global_options. ...
Echarts 漏斗图
实例: 本节任务任务一:漏斗图或金字塔图任务描述漏斗图(funnel)是倒三角形的条形图,金字塔是正三角形的条形图,这两者适用于业务流程比较规范.周期较长.环节较多的流程分析.漏斗图也是常用的B ...
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...
echarts漏斗图
图表效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
关于Echarts漏斗图
实现的效果: 主要实现了漏斗图内和外侧同时能显示内容. 代码: <template><div><div ref="chart" style=" ...
vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形
vue echarts 漏斗最近有一个需求漏斗统计,采用的echarts来实现需要实现如下效果最初版本旁边有描述,里面要有值: 第一步首先在项目里安装echarts; npm install ...
ECharts漏斗图(详细示例——满满的注释)
图表效果如下: 代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
html页面漏斗图,echarts 漏斗图示例
option = { color: ['#298DFF', '#2EC25B', '#FBD337'], backgroundColor: '#FFFFFF', barWidth: 8, title: ...
echarts 漏斗图
option = {title: {text: '漏斗图',subtext: '纯属虚构'},tooltip: {trigger: 'item',formatter: "{a} <br ...

echarts 漏斗图funnel

echarts 漏斗图funnel相关推荐

最新文章

热门文章