今天在学习ECharts时，想要在ECharts图表的原生态Demo中抠出漏斗图，却不知如何下手，经过一番研究，特总结如下：

首先我们需要这样做

1、拷贝出两个js文件：esl.js 和echarts.js ；

2、准备一个html页面进行图表容器配备和模块化加载js和创建图表

1）、引入esl.js文件

  1. <script src="../js/echarts/esl.js" type="text/javascript"></script>

之所以要引入esl.js 文件，因为它内部封装了很多模块化加载js文件和创建图表的回调函数方法。

2）、准备图表的装载容器

  1. <div id="funnel_a" style="height: 400px; width: 800px; border: 1px solid #ccc; padding: 10px;"></div>

3）、采用esl.js文件内的方法模块化加载漏斗图所需的库且在回调函数内创建漏斗图。

  1. // Step:3 conifg ECharts's path, link to echarts.js from current page.
  2.     // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
  3.     require.config({
  4.        /*  paths: {
  5.             echarts: '../js/echarts',        //echarts.js所在的路径
  6.             'echarts/chart/funnel': '../js/echarts'
  7.         } */
  8.        packages:[{
  9.          name:'echarts',
  10.          location:'../js/echarts',
  11.          main:'echarts'
  12.          },{
  13.          name:'zrender',
  14.          location:'../js/zrender',//zrender与echarts在同一级目录
  15.          main:'zrender'
  16.         }
  17.      ]
  18.      });
  19.     // Step:4 require echarts and use it in the callback.
  20.     // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
  21.     require(
  22.         [
  23.             'echarts',
  24.             'echarts/chart/bar',
  25.             'echarts/chart/map',
  26.             'echarts/chart/funnel'
  27.         ],
  28.         function (ec) {//渲染ECharts图表  ，可单独写出来作为回调函数
  29.             // --- 中国地图 ----------------------------------------------
  30.             var myChart1 = ec.init(document.getElementById('funnel_a'));
  31.             //加载图表
  32.             option = {
  33.             title : {
  34.                 text: '漏斗图',
  35.                 subtext: '纯属虚构'
  36.             },
  37.             tooltip : {
  38.                 trigger: 'item',
  39.                 formatter: "{a} <br/>{b} : {c}%"
  40.             },
  41.             toolbox: {
  42.                 show : true,
  43.                 feature : {
  44.                     mark : {show: true},
  45.                     dataView : {show: true, readOnly: false},
  46.                     restore : {show: true},
  47.                     saveAsImage : {show: true}
  48.                 }
  49.             },
  50.             legend: {
  51.                 data : ['展现','点击','访问','咨询','订单']
  52.             },
  53.             calculable : true,
  54.             series : [
  55.                 {
  56.                     name:'漏斗图',
  57.                     type:'funnel',
  58.                     width: '40%',
  59.                     data:[
  60.                         {value:60, name:'访问'},
  61.                         {value:40, name:'咨询'},
  62.                         {value:20, name:'订单'},
  63.                         {value:80, name:'点击'},
  64.                         {value:100, name:'展现'}
  65.                     ]
  66.                 },
  67.                 {
  68.                     name:'金字塔',
  69.                     type:'funnel',
  70.                     x : '50%',
  71.                     sort : 'ascending',
  72.                     itemStyle: {
  73.                         normal: {
  74.                             // color: 各异,
  75.                             label: {
  76.                                 position: 'left'
  77.                             }
  78.                         }
  79.                     },
  80.                     data:[
  81.                         {value:60, name:'访问'},
  82.                         {value:40, name:'咨询'},
  83.                         {value:20, name:'订单'},
  84.                         {value:80, name:'点击'},
  85.                         {value:100, name:'展现'}
  86.                     ]
  87.                 }
  88.             ]
  89.         };
  90.         myChart1.setOption(option);
  91.         }
  92.      );

type一定要是funnel，且require.config内必须要加载funnel相关的库，否则漏斗图将展示不出来的。

这样完美的漏斗图就此展现出来了，上张美图吧！

注意：如此图没有出现，则可能引入的包有问题，需要检查，再者zrender包在某种情况下最好引入，为避免不必要的麻烦也是必不可少的。

完整示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>ECharts-如何快速构建漏斗图示例-STEP DAY</title>
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6.     <meta http-equiv="description" content="this is my page">
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  9.     <script src="../js/echarts/esl.js" type="text/javascript"></script>
  10.   </head>
  11.   <body>
  12.       <div id="funnel_a" style="height: 400px; width: 800px; border: 1px solid #ccc; padding: 10px;">
  13.     </div>
  14.     <script type="text/javascript">
  15.     // Step:3 conifg ECharts's path, link to echarts.js from current page.
  16.     // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
  17.     require.config({
  18.        /*  paths: {
  19.             echarts: '../js/echarts',        //echarts.js所在的路径
  20.             'echarts/chart/funnel': '../js/echarts'
  21.         } */
  22.        packages:[{
  23.          name:'echarts',
  24.          location:'../js/echarts',
  25.          main:'echarts'
  26.          },{
  27.          name:'zrender',
  28.          location:'../js/zrender',//zrender与echarts在同一级目录
  29.          main:'zrender'
  30.         }
  31.      ]
  32.      });
  33.     // Step:4 require echarts and use it in the callback.
  34.     // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
  35.     require(
  36.         [
  37.             'echarts',
  38.             'echarts/chart/bar',
  39.             'echarts/chart/map',
  40.             'echarts/chart/funnel'
  41.         ],
  42.         function (ec) {//渲染ECharts图表  ，可单独写出来作为回调函数
  43.             var myChart1 = ec.init(document.getElementById('funnel_a'));
  44.             //加载图表
  45.             option = {
  46.             title : {
  47.                 text: '漏斗图',
  48.                 subtext: '纯属虚构'
  49.             },
  50.             tooltip : {
  51.                 trigger: 'item',
  52.                 formatter: "{a} <br/>{b} : {c}%"
  53.             },
  54.             toolbox: {
  55.                 show : true,
  56.                 feature : {
  57.                     mark : {show: true},
  58.                     dataView : {show: true, readOnly: false},
  59.                     restore : {show: true},
  60.                     saveAsImage : {show: true}
  61.                 }
  62.             },
  63.             legend: {
  64.                 data : ['展现','点击','访问','咨询','订单']
  65.             },
  66.             calculable : true,
  67.             series : [
  68.                 {
  69.                     name:'漏斗图',
  70.                     type:'funnel',
  71.                     width: '40%',
  72.                     data:[
  73.                         {value:60, name:'访问'},
  74.                         {value:40, name:'咨询'},
  75.                         {value:20, name:'订单'},
  76.                         {value:80, name:'点击'},
  77.                         {value:100, name:'展现'}
  78.                     ]
  79.                 },
  80.                 {
  81.                     name:'金字塔',
  82.                     type:'funnel',
  83.                     x : '50%',
  84.                     sort : 'ascending',
  85.                     itemStyle: {
  86.                         normal: {
  87.                             // color: 各异,
  88.                             label: {
  89.                                 position: 'left'
  90.                             }
  91.                         }
  92.                     },
  93.                     data:[
  94.                         {value:60, name:'访问'},
  95.                         {value:40, name:'咨询'},
  96.                         {value:20, name:'订单'},
  97.                         {value:80, name:'点击'},
  98.                         {value:100, name:'展现'}
  99.                     ]
  100.                 }
  101.             ]
  102.         };
  103.         myChart1.setOption(option);
  104.         }
  105.      );
  106.     </script>
  107.   </body>
  108. </html>

ECharts学习总结（二）-----图表组件漏斗图(funnel)的更多相关文章

  1. vue和echarts 封装的 v-charts 图表组件

    https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...

  2. 小白学Python（9）——pyecharts 绘制漏斗图 Funnel

    根据pyecharts的介绍一直没有研究明白def和return的用法,无法显示完整的漏斗图,还请各位指点. 根据上文绘制bar的方法,我更改了代码,做出了漏斗图,不过和demo不一样,而且数据也会随 ...

  3. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  4. Netty学习笔记(二)——netty组件及其用法

    1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...

  5. ECharts学习总结(二):标签式单文件引入echarts的方法

    下载好echarts的库文件.然后在script里面引入. //from echarts example <body> <div id="main" style= ...

  6. ECharts学习指南

    1.了解ECharts ECharts简单说就是互联网开发程序过程中,后台数据库用以实现数据到图形的映射的一个插件. 具体来说一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在PC和 ...

  7. Python pyecharts绘制漏斗图

    一.pyecharts绘制漏斗图方法简介 funnel.add()方法简介add(name, attr, value, funnel_sort="ascending", funne ...

  8. 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

    站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...

  9. 转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？

    一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...

随机推荐

  1. CentOS7-samba文件共享服务

    简介: Samba,是在Unix上实现SMB(Server Message Block)的一个工具套件.而SMB通常是windows用来实现共享的,包括文件和打印机等.而Unix上装上SMB,则使得U ...

  2. PAT (Basic Level) Practise （中文）- 1010. 一元多项式求导 (25)

    http://www.patest.cn/contests/pat-b-practise/1010 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降 ...

  3. Java第7次作业：造人类（用private封装，用static关键字自己造重载输出方法）什么是面向对象程序设计？什么是类和对象？什么是无参有参构造方法 ？什么是封装？

    什么是面向对象程序设计? 我们称为OOP(Object  Oriented  Programming) 就是非结构化的程序设计 要使用类和对象的方法来进行编程 什么是类,什么是对象 类就是封装了属性和 ...

  4. 一句话懂什么是JS闭包

    无论何时声明新函数并将其赋值给变量,都要存储函数定义和闭包.闭包包含在函数创建时作用域中的所有变量,它类似于背包.函数定义附带一个小背包,它的包中存储了函数定义创建时作用域中的所有变量. 我将永远记住 ...

  5. React支持装饰器

    在用mobx时用到了装饰器,无奈环境不支持装饰器,搜索了半天,网上教程乱七八糟,最后想到了babel官网上肯定有,一搜果然有,安装教程 见Babel官网. 最快捷的教程是官网文档

  6. 我如何解决Centos下cannot find a valid baseurl for repo的问题的

    刚刚安装完centos,进入命令行模式后,发现所有的命令都不能使用,最后一行显示:Error:Cannot find a valid baseurl for repo:base,如何解决? 在cent ...

  7. OC8051项目启动

  8. PHPExcel探索之旅

    学习地址: https://www.imooc.com/video/8359 下载地址: https://packagist.org/packages/phpoffice/phpexcel 用comp ...

  9. 关于缺失值NaN

    在Pandas中处理NaN值  https://blog.csdn.net/Tyro_java/article/details/81396000

  10. 跟踪路由 tracert

    由于最近遇到网络出现故障的问题,便使用到Tracert来确定了下出现故障的网络节点 记录下tracert命令相关内容 1. 简介 2. Tracert工作原理... 3. 常用参数 4. 使用示例与输 ...