demo.html
1.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div id="funnelchart" class="page out" data-title="漏斗图插件">
<div id="funnelchart-header"></div>
<div id="funnelchart-a"></div>
<div id="funnelchart-b"></div>
</div>
<script>
require(["NavHeader", "FunnelChart"], function(NavHeader, FunnelChart) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "funnelchart-header",
option: {
title:"漏斗图插件",
smallTitle:"funnelchart"
}
}).render();
}
new FunnelChart({
el: "funnelchart-a",
option: {
data : [
{"name":"直接访问","value":"335"},
{"name":"邮件营销","value":"310"},
{"name":"联盟广告","value":"234"},
{"name":"视频广告","value":"350"},
{"name":"搜索引擎","value":"548"}
],//图表数据来源
height : 400,//图表高度
title : {
show : true,
text : "某站点用户访问来源",//标题
subtext: "纯属虚构"//副标题
},
series : {
top : "15%",
left : "15%",
height : "85%",
width : "70%",
sort : "descending" //descending 降序 ascending 升序 none按数据排序
},
label : {
fontSize : 12
},
color:"#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色，默认
click : function(params){
var url = "/mobilemode/mobile/demo/plugin/NewChart/detail.html?ajax=true&name="+params.name+"&seriesname="+params.seriesName+"&value="+params.value;
$u(url);
}
}
}).render().then(function(){
if (!hasClsPicker) return;
_u.vetically("#funnelchart-a");
clsPicker.golalSetting({
container: "#funnelchart-a",
type: "Funnelchart"
});
new clsPicker({
selector: ".wev-chart-container",
text: ".wev-chart-container",
skew: [10, 9],
lineYSkew: 30,
position: "bottom right"
});
});
});
</script>