前言

使用三个series实现，第一个是虚化的背景漏斗那一块，第二个是实心的漏斗那一块，第三个是为了让横线旁的文字对齐所以value都是0。

一、效果

二、使用步骤

复制后直接在ECharts实例中粘贴使用
代码如下：

option = {tooltip: {trigger: 'item'// formatter: '{a} <br/>{b} : {c}%'},toolbox: {feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},series: [{type: 'funnel',left: '5%',width: '60%',color: ['#703AC2', '#0D74C1', '#37ABC4', '#6FB788', '#E6E97E'],label: {// position: 'inside',formatter: '',show: false// color: '#fff'},labelLine: {show: false},itemStyle: {opacity: 0.5},gap: 4,maxSize: '60%',// height: '86%',top: 20,bottom: 30,sort: 'descending',data: [{ value: 98, name: '易制毒' },{ value: 78, name: '易制爆' },{ value: 64, name: '剧毒' },{ value: 62, name: '爆炸' },{ value: 42, name: '精麻品' }]},{type: 'funnel',left: '-5%',width: '80%',maxSize: '30%',// height: '86%',gap: 4,top: 20,bottom: 30,sort: 'descending',label: {formatter: ''},itemStyle: {opacity: 1,// borderColor: '#fff',// borderWidth: 2},labelLine: {length: 0},data: [{ value: 44, name: '易制毒', num: 44, l: 16.123, kg: 5.521 },{ value: 39, name: '易制爆', num: 39, l: 12.321, kg: 4.254 },{ value: 33, name: '剧毒', num: 33, l: 10.254, kg: 4.012 },{ value: 27, name: '爆炸', num: 27, l: 9.213, kg: 3.654 },{ value: 14, name: '精麻品', num: 14, l: 8.214, kg: 3.218 }]},{type: 'funnel',left: '-5%',width: '80%',maxSize: '0%',// height: '86%',gap: 4,top: 20,bottom: 30,sort: 'descending',label: {show: true,lineHeight: 18,textBorderColor: 'transparent',formatter: function (params) {return ('{f|' +params.name +'}' +'\n' +params.data.num +'瓶(' +params.data.l +'L、' +params.data.kg +'KG)');},rich: {f: {color: '#999999'//字体颜色}}},itemStyle: {opacity: 1,borderColor: 'transparent'// borderWidth: 2},labelLine: {// show: falselength: 220//线的长度},// labelLine: {//   normal: {//     show: true,//     length: 30//   }// },// tooltip: {//   show: false// },data: [{ value: 0, name: '易制毒', num: 44, l: 16.123, kg: 5.521 },{ value: 0, name: '易制爆', num: 39, l: 12.321, kg: 4.254 },{ value: 0, name: '剧毒',  num: 33, l: 10.254, kg: 4.012 },{ value: 0, name: '爆炸',  num: 27, l: 9.213, kg: 3.654 },{ value: 0, name: '精麻品',num: 14, l: 8.214, kg: 3.218 }]}]
};

ECharts-漏斗图相关推荐

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漏斗图配置
option = { color : [ 'rgba(255, 69, 0, 0.5)', 'rgba(255, 150, 0, 0.5)', 'rgba(255, 200, 0, 0.5)', 'r ...
echarts 漏斗图funnel
1.配置datadata:[{name:'xx',value:n,...}]2.配置seriesseries:[{min:n, 指定数据的最小值max:n, 指定数据的最大值minSize:'0%', ...

ECharts-漏斗图

ECharts-漏斗图

前言

一、效果

二、使用步骤

ECharts-漏斗图相关推荐

最新文章

热门文章