版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89846156
效果图
源代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> <script src="js/jquery-1.11.0.min.js"></script> <script src="dist/extension/dataTool.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 1024px;height:768px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option; 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%', width: '80%', label: { normal: { formatter: '{b}预期' }, emphasis: { position: 'inside', formatter: '{b}预期: {c}%' } }, labelLine: { normal: { show: false } }, itemStyle: { normal: { opacity: 0.7 } }, data: [{ value: 60, name: '访问' }, { value: 40, name: '咨询' }, { value: 20, name: '订单' }, { value: 80, name: '点击' }, { value: 100, name: '展现' } ] }, { name: '实际', type: 'funnel', left: '10%', width: '80%', maxSize: '80%', label: { normal: { position: 'inside', formatter: '{c}%', textStyle: { color: '#fff' } }, emphasis: { position: 'inside', formatter: '{b}实际: {c}%' } }, itemStyle: { normal: { opacity: 0.5, borderColor: '#fff', borderWidth: 2 } }, data: [{ value: 30, name: '访问' }, { value: 10, name: '咨询' }, { value: 5, name: '订单' }, { value: 50, name: '点击' }, { value: 80, name: '展现' } ] } ] }; myChart.setOption(option); </script> </body> </html> 文章来源: https://blog.csdn.net/qq_20042935/article/details/89846156