<div id="chart_area" style="height:450px;"></div> <script type="text/javascript" src="js/echarts.min.js"></script> // 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_area'));
option = {
title: {
text: '智慧小屋访问全部来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
bottom: 10,
left: 10,
orient: 'vertical',
data: ['直接访问', '搜索引擎', '外部链接', '其他']
},
//calculable : true,
series: [
{
name: '漏斗图',
type: 'funnel', //漏斗图
left: '10%',
top: 60,
//x2: 80,
bottom: 60,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending', //数据排序,如果是:ascending,则是金字塔状
gap: 2, //数据图像间距
label: {
normal: {
show: true, //显示文本标签
position: 'inside' //内置图形文本标签,outside是外置,还有left,right,inner,center
},
emphasis: {
textStyle: {
fontSize: 20
}
}
},
labelLine: {//设置文本标签位置为left或right时显示的引导线
normal: {
length: 10, //长度
lineStyle: {
width: 1, //线宽
type: 'solid' //类型:实现,还有虚线:dashed和dotted
}
}
},
itemStyle: {//图像样式
normal: {
borderColor: '#fff', //描边颜色
borderWidth: 1 //描边宽度
}
},
data: [//内容数据
{value: 25, name: '直接访问'},
{value: 50, name: '搜索引擎'},
{value: 75, name: '外部链接'},
{value: 100, name: '其他'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
