今天在学习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: 400 width: 800 border: 1px solid # padding: 10"&&/div&
3）、采用esl.js文件内的方法模块化加载漏斗图所需的库且在回调函数内创建漏斗图。
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
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然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
'echarts',
'echarts/chart/bar',
'echarts/chart/map',
'echarts/chart/funnel'
function (ec) {//渲染ECharts图表
，可单独写出来作为回调函数
// --- 中国地图 ----------------------------------------------
var myChart1 = ec.init(document.getElementById('funnel_a'));
//加载图表
option = {
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}
data : ['展现','点击','访问','咨询','订单']
calculable : true,
series : [
name:'漏斗图',
type:'funnel',
width: '40%',
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
name:'金字塔',
type:'funnel',
x : '50%',
sort : 'ascending',
itemStyle: {
// color: 各异,
position: 'left'
{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&
&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/ charset=UTF-8"&
&!--&link rel="stylesheet" type="text/css" href="./styles.css"&--&
&script src="../js/echarts/esl.js" type="text/javascript"&&/script&
&div id="funnel_a" style="height: 400 width: 800 border: 1px solid # padding: 10"&
&script type="text/javascript"&
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
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然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
'echarts',
'echarts/chart/bar',
'echarts/chart/map',
'echarts/chart/funnel'
function (ec) {//渲染ECharts图表
，可单独写出来作为回调函数
var myChart1 = ec.init(document.getElementById('funnel_a'));
//加载图表
option = {
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}
data : ['展现','点击','访问','咨询','订单']
calculable : true,
series : [
name:'漏斗图',
type:'funnel',
width: '40%',
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
name:'金字塔',
type:'funnel',
x : '50%',
sort : 'ascending',
itemStyle: {
// color: 各异,
position: 'left'
{value:60, name:'访问'},
{value:40, name:'咨询'},
{value:20, name:'订单'},
{value:80, name:'点击'},
{value:100, name:'展现'}
myChart1.setOption(option);
阅读(...) 评论()力导向布局图
事件河流图
主题预览 ，主题定制调试工具
ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。
专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。
by （百度） · （百度）
by 于博（新华社） · 吴楚茵（南方都市报） · （百度）
by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · （百度）
by （北京理工大学软件学院）
by （CSDN开源夏令营）相关文章推荐
在使用Echarts制作柱状图的时候，通常在横轴每个标签只有一个柱子的时候，每个柱子的颜色都是一样的，如下图所示：
然而，很多时候我们为了使界面更加美观，通常会有使每个柱子颜色都不相同的需求。那...
之前在做报表的时候用过echart 用完也就完了，而这次在用的时候已经忘了，所以这里简单记录一下，好记性不如烂笔头！！！
1、折线图修改颜色：
type: 'category...
option = {
tooltip: {
trigger: '...
最近在使用echart开发图标，api里面虽然有些设置，但是如果想让柱状图每个柱的颜色都不相同，简单的通过color设置是没有作用的，这里，就要用到其他的方式了
下面只是列举下我认为比较常用的，...
EChart主页：
/index.html
EChart-2.1.8下载地址：
/build/ech...
这几天要用echarts做一个井盖数量查询的柱状图，有几个要求：
1、要将柱体代表的数值显示在柱体顶部。
2、每个柱体要用不同的颜色显示。...
series: [{
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
1、废话少说，直接上代码（前提先引入echarts先关文件）
var myChart = echarts.init(document.getElementById('chartOne'));...
在使用echarts产生的柱状图中，有时候自动产生的颜色大不如人意，可以通过以下参数进行修改。series : [
ECharts主页：
/index.html
ECharts-2.1.8下载地址：
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)相关文章推荐
按照官方文档写了一个柱状图的例子。第一种方式使用网络js:主要代码如下：
Echarts学习记录——调整柱状图圆角弧度
series.itemStyle:图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）
其中的barBorderRadius属性...
"stack": 'sum',//如果不加该字段，则显示的是两个分离开来的柱状图
参考自百度框架API,
/echarts2/doc/start.htm...
itemStyle : { normal: {label : {show: true, position: ‘top’}}},echarts3:
本篇文章实现的是以下两种需求：
1，使用Echarts3实现柱状图；
2，使用Echarts3实现饼图；
包含Echarts使用过程中遇到的坑的解决办法。...
本文章作为学习ECharts练手之作，中文学习地址：/index.html
实现效果如下：
1.从json中提取数据
2.按年度显示不同数据
2.1 每次只显示一个图例的图表 设置： selectedMode:'single',
x: 'righ...
require(['echarts','echarts/theme/macarons','echarts/chart/ba...
Echarts 柱状图 多条柱子 颜色 宽度 标题 柱状图 背景线条不要 柱子中间不要有空格 图例右边
标识右边...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}