ECharts漏斗图-漏斗图15.zip资源-CSDN下载

共3个文件

js：2个

html：1个

版权申诉

93 浏览量 2025-08-18 09:00:43 上传评论收藏 1.01MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts漏斗图-漏斗图15.zip （3个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

bin

index.html 3KB

images

json

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> #chart-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 1000px; height: 750px; } </style> <script src="./lib/5.5.0/echarts.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="chart-panel"></div> <script type="text/javascript"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 let option = { toolbox: { feature: { saveAsImage: {}, } }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c}%" }, legend: { show: true, data: ["计划投入", "实际投入"] }, series: [ { color: ['#0000ff'], name: '计划投入', type: 'funnel', width: '45%', height: '70%', x: '5%', minSize: '10%', funnelAlign: 'right', sort: "descending", data: [{ value: 30, name: '下单30%' }, { value: 55, name: '咨询55%' }, { value: 60, name: '点击60%' }, { value: 66, name: '访问66%' }, { value: 80, name: '展现80%' } ], label: { position: 'inside' }, itemStyle: { borderWidth: 0, shadowBlur: 20, shadowOffsetX: 0, shadowOffsetY: 5, shadowColor: 'rgba(0, 0, 0, 0.3)' } }, { color: ['#67E0E3'], name: '实际投入', type: 'funnel', width: '45%', height: '70%', x: '50%', minSize: '10%', funnelAlign: 'left', data: [{ value: 35, name: '下单35%' }, { value: 40, name: '咨询40%' }, { value: 70, name: '访问70%' }, { value: 90, name: '点击90%' }, { value: 95, name: '展现95%' } ], label: { position: 'inside' }, itemStyle: { borderWidth: 0, shadowBlur: 20, shadowOffsetX: 0, shadowOffsetY: 5, shadowColor: 'rgba(0, 0, 0, 0.3)' } }, ] }; //将图表对象和图表配置进行关联。 myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉