ECharts學習總結（二）-----圖表組件漏斗圖(funnel)

時間 2019-12-01

標籤 echarts 學習總結圖表組件漏斗 funnel 简体版

原文原文鏈接

今天在學習ECharts時，想要在ECharts圖表的原生態Demo中摳出漏斗圖，殊不知如何下手，通過一番研究，特總結以下：javascript

首先咱們須要這樣作css

一、拷貝出兩個js文件：esl.js 和echarts.js ；html

二、準備一個html頁面進行圖表容器配備和模塊化加載js和建立圖表java

1）、引入esl.js文件echarts

<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相關的庫，不然漏斗圖將展現不出來的。ui

這樣完美的漏斗圖就此展示出來了，上張美圖吧！this

注意：如此圖沒有出現，則可能引入的包有問題，須要檢查，再者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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。