今天在学习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包在某种情况下最好引入，为避免不必要的麻烦也是必不可少的。

ECharts图表组件入门教程之漏斗图(funnel)：如何快速构建漏斗图采用模块化加载方式

完整示例代码：

 

<!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>

 

转载于:https://www.cnblogs.com/whsa/p/4361206.html

# javascript
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生