ECharts学习总结（二）-----图表组件漏斗图(funnel)
今天在学习ECharts时，想要在ECharts图表的原生态Demo中抠出漏斗图，却不知如何下手，经过一番研究，特总结如下：
首先我们需要这样做
1、拷贝出两个js文件：esl.js 和echarts.js ；
2、准备一个html页面进行图表容器配备和模块化加载js和创建图表
1）、引入esl.js文件
<script src="../js/echarts/esl.js" type="text/javascript"></script>
之所以要引入esl.js 文件，因为它内部封装了很多模块化加载js文件和创建图表的回调函数方法。
2）、准备图表的装载容器
<div id="funnel_a" style="height: 400px; width: 800px; border: 1px solid #ccc; padding: 10px;"></div>
3）、采用esl.js文件内的方法模块化加载漏斗图所需的库且在回调函数内创建漏斗图。
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
/* paths: {
echarts: '../js/echarts', //echarts.js所在的路径
'echarts/chart/funnel': '../js/echarts'
} */
packages:[{
name:'echarts',
location:'../js/echarts',
main:'echarts'
},{
name:'zrender',
location:'../js/zrender',//zrender与echarts在同一级目录
main:'zrender'
}
]
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/map',
'echarts/chart/funnel'
],
function (ec) {//渲染ECharts图表 ，可单独写出来作为回调函数
// --- 中国地图 ----------------------------------------------
var myChart1 = ec.init(document.getElementById('funnel_a'));
//加载图表
option = {
title : {
text: '漏斗图',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
data : ['展现','点击','访问','咨询','订单']
},
calculable : true,
series : [
{
name:'漏斗图',
type:'funnel',
width: '40%',
data:[
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
]
},
{
name:'金字塔',
type:'funnel',
x : '50%',
sort : 'ascending',
itemStyle: {
normal: {
// color: 各异,
label: {
position: 'left'
}
}
},
data:[
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
]
}
]
};
myChart1.setOption(option);
}
);
type一定要是funnel，且require.config内必须要加载funnel相关的库，否则漏斗图将展示不出来的。
这样完美的漏斗图就此展现出来了，上张美图吧！
注意：如此图没有出现，则可能引入的包有问题，需要检查，再者zrender包在某种情况下最好引入，为避免不必要的麻烦也是必不可少的。
完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>ECharts-如何快速构建漏斗图示例-STEP DAY</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="../js/echarts/esl.js" type="text/javascript"></script>
</head>
<body>
<div id="funnel_a" style="height: 400px; width: 800px; border: 1px solid #ccc; padding: 10px;">
</div>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
/* paths: {
echarts: '../js/echarts', //echarts.js所在的路径
'echarts/chart/funnel': '../js/echarts'
} */
packages:[{
name:'echarts',
location:'../js/echarts',
main:'echarts'
},{
name:'zrender',
location:'../js/zrender',//zrender与echarts在同一级目录
main:'zrender'
}
]
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/map',
'echarts/chart/funnel'
],
function (ec) {//渲染ECharts图表 ，可单独写出来作为回调函数
var myChart1 = ec.init(document.getElementById('funnel_a'));
//加载图表
option = {
title : {
text: '漏斗图',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
data : ['展现','点击','访问','咨询','订单']
},
calculable : true,
series : [
{
name:'漏斗图',
type:'funnel',
width: '40%',
data:[
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
]
},
{
name:'金字塔',
type:'funnel',
x : '50%',
sort : 'ascending',
itemStyle: {
normal: {
// color: 各异,
label: {
position: 'left'
}
}
},
data:[
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
]
}
]
};
myChart1.setOption(option);
}
);
</script>
</body>
</html>
ECharts学习总结（二）-----图表组件漏斗图(funnel)的更多相关文章
- vue和echarts 封装的 v-charts 图表组件
https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...
- 小白学Python（9）——pyecharts 绘制漏斗图 Funnel
根据pyecharts的介绍一直没有研究明白def和return的用法,无法显示完整的漏斗图,还请各位指点. 根据上文绘制bar的方法,我更改了代码,做出了漏斗图,不过和demo不一样,而且数据也会随 ...
- ECharts学习（2）--饼状图之南丁格尔图
1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
- Netty学习笔记(二)——netty组件及其用法
1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...
- ECharts学习总结(二):标签式单文件引入echarts的方法
下载好echarts的库文件.然后在script里面引入. //from echarts example <body> <div id="main" style= ...
- ECharts学习指南
1.了解ECharts ECharts简单说就是互联网开发程序过程中,后台数据库用以实现数据到图形的映射的一个插件. 具体来说一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在PC和 ...
- Python pyecharts绘制漏斗图
一.pyecharts绘制漏斗图方法简介 funnel.add()方法简介add(name, attr, value, funnel_sort="ascending", funne ...
- 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
- 转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？
一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...
随机推荐
- Python-OpenCV中图像合并显示
在图像处理中,我们通常需要将原图像与处理后的图像放在同一个窗口显示,这样便于比较. 首先,需要介绍Numpy中的两个函数:hstack().vstack(). 函数原型:hstack(tup) ,参数 ...
- 用dfs求解八皇后问题
相信大家都已经很熟悉八皇后问题了,就是指:在8X8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同一列或同一斜线上,问有多少种摆法.主要思路:按行进行深度优先搜索,在该 ...
- C#数组简介
一.数组的定义 数组:是一种包含若干个变量的数据结构,这些变量可以通过索引进行访问. 数组的元素:数组中的变量就称为数组的元素. 元素类型:数组中的元素具有相同的数据类型,该数据类型就称为数组的元素类 ...
- ssh整合思想 Spring分模块开发 crud参数传递 解决HTTP Status 500 - Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or（增加事务）
在Spring核心配置文件中没有增加事务方法,导致以上问题 Action类UserAction package com.swift.action; import com.opensymphony.xw ...
- 【转】MFC编辑框自动换行，垂直滚动条自动下移
1.新建一个编辑框控件(Edit Control),将其多行(Multiline)前面打勾(属性设置为True),Auto HScroll前面的勾去掉(属性设置False),这样就可以实现每一行填满后 ...
- 【离线 撤销并查集 线段树分治】bzoj1018: [SHOI2008]堵塞的交通traffic
本题可化成更一般的问题:离线动态图询问连通性 当然可以利用它的特殊性质,采用在线线段树维护一些标记的方法 Description 有一天,由于某种穿越现象作用,你来到了传说中的小人国.小人国的布局非常 ...
- How to Install Zabbix Server on Centos6.7
Prerequisite Environment First you must use your Subscription Manager to enable SCL: [root@fileserve ...
- MyBatis的mapper.xml文件的参数问题：org.apache.ibatis.builder.IncompleteElementException: Could not find parameter map
配置参数类型有两种选择,即:parameterType和parameterMap 不管参数是否是基本数据类型还是map类型,都是使用parameterType. 版权声明:本文为博主原创文章,未经博主 ...
- 【mysql】【转发】my.cnf 讲解
PS:本配置文件针对Dell R710,双至强E5620.16G内存的硬件配置.CentOS 5.6 64位系统,MySQL 5.5.x 稳定版.适用于日IP 50-100w,PV 100-300w的 ...
- ubuntu 设置定时任务
crontab -l #查看详情crontab -e #设置定时任务 * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时 ...