時隔一個月再次更新。。。

不過好像沒有人看。。。

不過還是要更下去。。。

——————————————————————————————————————

產品設計的CRM系統中有一項 銷售漏斗的功能，如圖所示：

功能要求隨著銷售的銷售進度以及客戶的匯款情況，漏斗容器跟著變化

本來是用CSS3寫了一個“假”的漏斗，漏斗形狀和資料並不能跟著變化

此時部門老大（名張傑，沒錯，就是謝娜老公那個張傑）推薦了一個外掛，甚是好用——Echarts圖表

介紹：

ECharts，一個純 Javascript 的圖表庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。【這段為複製的定義。。zzz】

圖表型別：折線圖，柱狀圖，散點圖，餅圖，K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖，用於關係資料視覺化的關係圖，treemap，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭等等。

使用方法

Echarts圖表的使用方法非常簡單

首先在Echarts 的官網上有上百種的例子，都是可以免費下載的

下載對應程式碼之後，我們需要在頁面載入對應的JS檔案（按需下載，官網——下載——下載——自定義構建——選擇你需要的圖表，不需要下載全部JS庫），頁面引用方式與普通JS相同

例：<script src="echarts.min.js"></script>

和bootstrap類似，我們需要把我們下載的圖表程式碼放到一個顯示圖表的容器裡：

  <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

銷售漏斗：

                    <script type="text/javascript">
                        // 基於準備好的dom，初始化echarts例項
                        var myChart = echarts.init(document.getElementById('main'));

                        // 指定圖表的配置項和資料
                        var option = {

                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c}%"
                            },
                            toolbox: {
                                feature: {
                                    dataView: { readOnly: false },
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            legend: {
                                data: ['潛在客戶  100單', '跟進中 80單', '售前提案 35單', '簽單回款  30單', ]
                            },
                            calculable: true,
                            series: [{
                                name: '漏斗圖',
                                type: 'funnel',
                                left: '0',
                                top: '0',
                                //x2: 80,

                                width: '100%',
                                // height: {totalHeight} - y - y2,
                                min: 0,
                                max: 100,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'
                                    },
                                    emphasis: {
                                        textStyle: {
                                            fontSize: 14
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        length: 10,
                                        lineStyle: {
                                            width: 1,
                                            type: 'solid'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {

                                        borderColor: '#fff',
                                        borderWidth: 1
                                    }
                                },
                                data: [

                                    { value: 70, name: '' ,
                                    itemStyle: {
                                        normal: {
                                        color: 'lightgreen'
                                    }}},
                                    { value: 80, name: '' ,
                                    itemStyle: {
                                        normal: {
                                        color: 'lightsalmon'
                                    }}},
                                    { value: 90, name: '' ,
                                    itemStyle: {
                                        normal: {
                                        color: 'lightblue'
                                    }}},
                                    { value: 100, name: '',
                                    itemStyle: {
                                        normal: {
                                        color: 'lightcoral'
                                    }}}
                                ]

                            }]
                        };

                        // 使用剛指定的配置項和資料顯示圖表。
                        myChart.setOption(option);
                    </script>
                </div>
                <div class="col-xs-5" style="height: 300px;">
                    <div class="loudou"><span class="index_part3font">潛在客戶 </span>   <span class="index_part3number">  100單</span></div>
                    <div class="loudou"><span class="index_part3font">跟進中 </span>              <span class="index_part3number">    80單</span></div>
                    <div class="loudou"><span class="index_part3font">售前提案</span>           <span class="index_part3number">     35單</span></div>
                    <div class="loudou"><span class="index_part3font">簽單回款</span>        <span class="index_part3number">  30單</span></div>

                </div>
            </div>
        </div>
 

每個圖示裡邊需要修改的資料項，形狀，大小，顏色都是可以修改的，對照著官網上的例子，懂一些程式碼的都很容易實現！！！！