echarts漏斗图

图表效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>(金字塔)漏斗图案例 </title>
<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"> </script>
</head>
<body>
<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"> </div>
</body>
</html>
<script type="text/javascript">
// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
var chart1 = echarts.init( document.getElementById( "chart1"));
// 指定图表的配置项和数据
var option = {
backgroundColor: { // 背景颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(102,255,255,0.6)' // 0% 处的颜色
}, {
offset: 0.5, color: '#fff' // 50% 处的颜色
}, {
offset: 1, color: 'rgba(102,255,255,0.6)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
title: { // 图表标题
text: '漏斗图标题', // 标题文本内容
link: 'https://blog.csdn.net/gray_key', // 标题链接地址
target: 'blank', // 链接在新窗口打开
left: '5%', // 标题距容器左侧5%
top: '5%', // 标题距容器顶部5%
textStyle: { // 标题文本样式
color: '#000', // 字体颜色
fontSize: 20, // 字体大小
}
},
// 弹框提示
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%" // a对应系列名称,b对应数据项名称,c对应数据项值.
},
// 图例
legend: {
data: [ '本市', '省内', '省外', '国外', '情况不明']
},
// 金字塔块的颜色
color: [ '#FF0000', '#FFFF00', '#33ff00', '#33ffff', '#0000ff', ],
// 系列
series: [
// 系列1 (外部)
{
name: '就业范围分析',
type: 'funnel',
left: '10%',
width: '80%',
sort : 'ascending', // 金字塔形:'ascending', 漏斗图形:'descending'
label: {
normal: {
formatter: '{b}' // 金字塔外标签
},
/* emphasis: {
position:'inside',
formatter: '{b}预期: {c}%'
}*/
},
labelLine: { // 标签的视觉引导线样式
normal: {
show: true, // 是否显示引导线
length: 30 // 视觉引导线第一段的长度。
}
},
itemStyle: { // 图形样式
normal: {
opacity: 0.4 // 系列1图形透明度
}
},
tooltip: {
show: false // 让系列一(金字塔外层图形的提示框不显示)
},
// 系列1数据(数据项值和数据项名称)
// 系列1(外金字塔)的数据项值一般固定为:20、40、60、80、100,这种有规律的数值,
// 这样外金字塔才能是一个正三角形.
data: [
{ value: 20, name: '国外'},
{ value: 40, name: '情况不明'},
{ value: 60, name: '省外'},
{ value: 80, name: '省内'},
{ value: 100, name: '本市'}
]
},
// 系列2 (内部)
{
name: '就业范围分析',
type: 'funnel',
left: '10%',
width: '80%',
maxSize: '80%',
sort : 'ascending',
label: {
normal: {
position: 'inside', // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
formatter: '{c}%', // 标签文本
textStyle: {
color: '#fff'
}
},
emphasis: { // 本系列每个数据项中特定的 tooltip 设定
position: 'inside',
formatter: '{b}: {c}%'
}
},
itemStyle: {
normal: {
opacity: 08, // 系列2图形透明度
borderColor: '#fff', // 图形边框颜色
borderWidth: 3 // 图形边框宽度大小
}
},
// 系列2数据(数据项值和数据项名称)
// 系列2(内金字塔)的数据项值才是真实的数据值,通过ajax请求获取数据后展示.
// 至于系列1和系列2的数据项名一般相同或是相关联的.
data: [
{ value: 5, name: '国外'},
{ value: 12, name: '情况不明'},
{ value: 18, name: '省外'},
{ value: 25, name: '省内'},
{ value: 40, name: '本市'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
chart1.setOption(option)
</script>

想要使用该图表,只需要复制以上代码 ,再下载 echarts.js 在页面文件中引入即可.

注：想要让图表由金字塔转变为漏斗图,只需建将代码中图表配置项中的 sort : 'ascending' 改为 sort : 'descending' 即可。

echarts.js 下载链接: http://echarts.baidu.com/download.html

echarts漏斗图相关推荐

Echarts 漏斗图
实例: 本节任务任务一:漏斗图或金字塔图任务描述漏斗图(funnel)是倒三角形的条形图,金字塔是正三角形的条形图,这两者适用于业务流程比较规范.周期较长.环节较多的流程分析.漏斗图也是常用的B ...
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...
关于Echarts漏斗图
实现的效果: 主要实现了漏斗图内和外侧同时能显示内容. 代码: <template><div><div ref="chart" style=" ...
vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形
vue echarts 漏斗最近有一个需求漏斗统计,采用的echarts来实现需要实现如下效果最初版本旁边有描述,里面要有值: 第一步首先在项目里安装echarts; npm install ...
ECharts漏斗图(详细示例——满满的注释)
图表效果如下: 代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
html页面漏斗图,echarts 漏斗图示例
option = { color: ['#298DFF', '#2EC25B', '#FBD337'], backgroundColor: '#FFFFFF', barWidth: 8, title: ...
echarts 漏斗图
option = {title: {text: '漏斗图',subtext: '纯属虚构'},tooltip: {trigger: 'item',formatter: "{a} <br ...
echarts漏斗图配置
option = { color : [ 'rgba(255, 69, 0, 0.5)', 'rgba(255, 150, 0, 0.5)', 'rgba(255, 200, 0, 0.5)', 'r ...
echarts 漏斗图funnel
1.配置datadata:[{name:'xx',value:n,...}]2.配置seriesseries:[{min:n, 指定数据的最小值max:n, 指定数据的最大值minSize:'0%', ...

echarts漏斗图

echarts漏斗图相关推荐

最新文章

热门文章