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>