<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小(宽高)的DOM--->
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
// 基于准备好的DOM,初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
color: ['lightblue', '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(155,23,31,0.5)', 'rgba(23,44,55,0.5)'//设置漏斗每个信息框架的颜色与透明度
],
//标题设置
title: {
textStyle: {
color: 'pink'
},
text: '实训3漏斗图'
},
backgroundColor: 'rgba(128, 128, 128, 0.1)', //背景,前面三个设置颜色,后一个设置透明度
tooltip: {
trigger: 'item',//数据项图形触发
formatter: "{a} <br/>{b} : {c} ({d}%)"//详情提示框
}, // 配置提示框组件
toolbox: {
left: 555,
top: 0,//上下左右的位置
feature: {
dataView: {//数据视图工具,可以展现当前图表所用的数据
},
restore: {},//刷新还原
saveAsImage: {}//下载图片
}
}, // 配置工具箱组件
legend: {
left: 40,// 图例的上下左右位置
top: 30,
data: ['市场调查', '潜在客户', '客户跟踪',
'客户邀约', '客户谈判', '签订合同'
]
},
calculable: true,
series: [ // 配置数据系列
{
name: '漏斗图',
type: 'funnel',//形状类型
left: '3%',
sort: 'descending', //金字塔:'ascending'; 漏斗图:'descending'
top: 60,
bottom: 60,//整体长度
width: '80%',//整体宽度
min: 0,
max: 50000,//宽度最大的值
minSize: '0%', // 设置每一块的最小宽度
maxSize: '1000', // 设置每一块的最大,一次去除掉尖角
gap: 2, // 设置每一块之间的间隔
label: {
show: true,
position: 'inside'
}, // 设置标签显示在里面|外面
labelLine: {
length: 10, // 设置每一块的名字前面的线的长度
lineStyle: {
width: 1, // 设置每一块的名字前面的线的宽度
type: 'solid' // 设置每一块的名字前面的线的类型
}
},
itemStyle: {
normal: { // 设置图形在正常状态下的样式
label: {
show: true,//汉字是否显示
fontSize: 15,//字体大小
color: 'black',//汉字颜色
position: 'inside',//汉字位置
},
borderColor: 'pink', // 设置每一块的边框颜色
borderWidth: 5, // 设置每一块边框的宽度
shadowBlur: 5, // 设置整个外面的阴影厚度
shadowOffsetX: 0, // 设置每一块的y轴的阴影,y的位置
shadowOffsetY: 50, // 设置每一块的x轴的阴影,x的位置
shadowColor: 'rgba(255,192,203,0.4)' // 设置阴影颜色与透明度
}
},
// 设置鼠标hover时高亮样式
emphasis: {
label: {
fontFamily: "黑体",
color: 'red',
fontSize: 30
}
},
data: [ // 设置在漏斗图中展示的数据
{
value: 25000,
name: '市场调查'
}, {
value: 22075,
name: '潜在客户'
},
{
value: 18074,
name: '客户跟踪'
}, {
value: 15063,
name: '客户邀约'
},
{
value: 12005,
name: '客户谈判'
}, {
value: 10634,
name: '签订合同'
},
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>