echarts.js文件下载地址:Apache ECharts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="echarts.js"></script> <title></title> </head> <body> <div id="main" style="width: 800px; height: 800px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main")); var option = { color :['lingtblue','rgba(0,150,0,0.5)','rgba(255,200,0,0.5)', 'rgba(155,200,50,0.5)','rgba(44,44,0,0.5)','rgba(33,33,30,0.5)', 'rgba(255,66,0,0.5)','rgba(165,93,31,0.5)','rgba(23,44,55,0.5)'], title: {left:270,top:0,textStyle:{color:'green'},text:'漏斗图'}, backgroundColor:'rgba(128,128,128,0.1)', tooltip:{trigger:'item',formatter:"{a} <br/>{b} : {c}%"}, toolbox:{ left:555,top:0, feature:{ dataView:{readOnly:false}, restore:{},saveAsImage:{} } }, legend:{ left:40,top:30,data:['浏览选购','添加到购物车','购物车结算', '核对订单信息','提交订单','选择支付方式','完成支付'] }, series:[ { name:'漏斗图',type:'funnel',left:'3%', sort:'descending', top:60,bottom:60,width:'80%', min:0,max:100, minSize:'0%', maxSize:'100%', gap:2, label:{show:true,position:'inside'}, labelLine:{ length:10, lineStyle:{ width:1, type:'solid' } }, itemStyle:{ normal:{ label:{show:true,fontSize:15,color:'blue',position:'outside',}, borderColor:'#fff', borderWidth:0, shadowBlur:50, shadowOffsetX:0, shadowOffsetY:50, shadowColor:'rgba(0,255,0,0.4)' } }, emphasis:{label:{fontFamily:"楷体",color:'green',fontSize:28}}, data:[ {value:100,name:'浏览选购'},{value:60,name:'添加到购物车'}, {value:42,name:'购物车结算'},{value:25,name:'核对订单信息'}, {value:9,name:'提交订单'},{value:4,name:'选择支付方式'}, {value:2.5,name:'完成支付'},] } ] }; myChart.setOption(option); </script> </body> </html>
