echarts凡例表示は番号、省略記号を制限し、デフォルトのスタイルを変更します

同様にBaiduの統計は、時には数のより多くの伝説が、表示された初期の数だけでなく、ディスプレイの最大数を制御する必要のフロントエンドは、レンダリングを見て：
コードを付与します。
スクリプト> た OBJ = {};
        だっ text_data = [ 'http://www.baidu.com'、 'https://www.sogou.com'、 'http://www.333.com'



        、
             'http://www.444.com'、 'http://www.555.com'、 'http://www.666.com'、 'http://www.777.com' 、
             " http://www.888.com」、 'http://www.999.com'、 '外部链接总计' 
        ]; 
        ため（VAR i = 0; iは<text_data.lengthと、iは++ ）{
             場合（I> 2 &&（iはtext_data.lengthを< - 1 ））{ 
                OBJ [text_dataを[I] = 偽。
            } 他{ 
                OBJ [text_data [I] = 真。
            } 
            OBJ [text_data [text_data.length - 1] = 真。
        // にconsole.log（OBJ）
        VaRの myChart = echarts.init（のdocument.getElementById（ 'all_line' ））; 
        myChart myChart.clear（）：？ "" ; 
        MyChart.setOption（{ 
            ヒント：{ 
                トリガ： '軸' 、
                backgroundColorの： 'RGBA（255,255,255,0.8）'は、
                axisPointer：{ // 軸インジケータ軸の有効なトリガー 
                    タイプ： '影'、// '行' | '影'：デフォルトでは、必要に応じて直線的であり、
                    shadowStyle： { 
                        色： 'RGBA（150,150,150,0.2'）
                    }
                }、
                TEXTSTYLE：{ 
                    色： '＃666' 、
                    のfontSize： '14px' 、
                }、
                extraCssText：「幅：220px;高さ：60％;パディング：0;ボックスシャドウ：0 3px RGBA（0、0、0 、0.3）; "」、
                フォーマッタ：関数（paramsは）{
                     VAR htmlStr = "" ;
                     のための（VAR i = 0; I <params.length; I ++ ）{
                         VARのTEM =のparamsは[I] .nameの、
                         VaRのヴァル=params [i]は.VALUE。
                        もし（tem.indexOf（ '/'）<0 ）{ 
                            TEM > 9？TEM = TEM + "：00 - " + TEM + "59"：TEM = "0" + TEM + "：00 - " + 
                                "0" + TEM + "：59" ; 
                        } 
                        のval > 0？ヴァル=ヴァルます。val = ' - ' 
                        htmlStr + = 
                            '<divのスタイル= "高さ：26px;行の高さ：26px;オーバーフロー：隠された;パディング：計6Pxの8px;">' + 
                            「<スパンのスタイル= "フロート：左;最大幅：160ピクセル;オーバーフロー：隠された;テキストオーバーフロー：省略記号;ホワイトスペース：+ htmlStr + '</ DIV> </ DIV>' の戻り解像度。
                }、
            }、
                    
                     
            TEXTSTYLE。{ 
                色： 'RGB（120、122、125）' 、
            }、
            色：['＃1 4fa8f9'、 '＃1 6ec71e'、 '＃1 f56e6a'、 '＃1 fc8b40'、 '＃818af8'、 '＃31c9d7'、 '＃1 f35e7a'、 '＃1 ab7aee' 、
                 '＃1 14d68b'、 '＃1 cde5ff' 
            ] 、
            グリッド：{ 
                トップ： 30、// 下、既定60に大きな 
                底：70 
            }、
            凡例：{ 
                底： 1 、
                itemGap： 15 、
                itemWidth： 9 、
                itemHeight： 10 、
                TEXTSTYLE：{ 
                    パディング：[ 0、0、 0,8 ]
                }、
                フォーマッタ：関数（名前）{
                     リターン（name.length> 14（name.slice（0、14）+ "..."？ ）：名前）; 
                }、
                選択され：OBJ、
                データ：text_data 
            }、
            XAXIS：[{ 
                タイプ： 'カテゴリー' 、
                 // boundaryGap：falseに、//ポリシーブランク側が軸座標
                axisTickを：{ 
                    alignWithLabel：真へ
                }、 
                たAxisLabel：{
                    間隔： 2 
                }、
                axisLine：{ 
                    をlineStyle：{
                        色："#ddd" 
                    } 
                }、
                データ：[ '0'、 '1'、 '2'、 '3'、 '4'、 '5'、 '6'、 '7'、 '8'、「9 」、 '10'、 '11'、 '12'、 '13'、 '14' 、
                     '15'、 '16'、 '17'、 '18'、 '19'、 '20'、 '21'、 '22'、 '23' 
                ] 
            }]、
            Y軸：[{ 
                タイプ： '値' 、
                axisLine：{ 
                    をlineStyle：{ 
                        色： "透明」 
                    } 
                }、
                分割線：{ 
                    をlineStyle：{
                        色： '#eee' 、
                    } 
                } 
            }]、
            シリーズ：[{ 
                    名： 'http://www.baidu.com' 、
                    タイプ： '行' 、
                    シンボル： '円' 、
                    symbolSize： 5 '' 、
                    データ。 [ 8、1、1、0、0、3、2、0、6、3、1、4、7、3、7、15、11、3、8、3、2、5、4、7 ] 
                } 、
                { 
                    名： 'https://www.sogou.com' 、
                    タイプ： '行' 、
                    シンボル： '円' 、
                    symbolSize： 5 '' 、
                    データ[ 1、1、0、0、2、1、0、1、3、1、0、0、1、0、1 、1、1、0、2、2、0、4、2、4 ] 
                }、
                { 
                    名前： 'http://www.333.com' 、
                    タイプ： '行' 、
                    シンボル： '円' 、
                    symbolSize。 '5' 、
                    データ：[1、3、0、0、0、1、1、0、0、1、2、1、3、1、1、1、1、0、2、0、2、1、1、1、 ]
                }、
                { 
                    名前： 'http://www.444.com' 、
                    タイプ： '行' 、
                    シンボル： '円' 、
                    symbolSize： 5 '' 、
                    データ：[ 0、0、0、0、0、0、 0、0、1、0、1、2、3、0、0、0、3、1、0、2、0、1、0、0 ] 
                }、
                { 
                    名：「HTTP：//www.555。 COM」、
                    タイプ： '行' 
                    の記号： '丸' 、
                    symbolSize：'5' 、
                    データ：[ 0、0、0、0、0、0、1、0、1、1、0、0、1、1、0、1、0、1、2、0、1、1 、2、0 ] 
                }、
                { 
                    名前： 'http://www.666.com' 、
                    タイプ： '行' 、
                    シンボル： '円' 、
                    symbolSize： 5 '' 、
                    データ：[ 0、1、0、0 、0、0、0、0、0、1、0、0、0、0、0、0、2、0、2、0、0、1、0、0 ] 
                }、
                {
                    名称： 'http://www.777.com' 、
                    タイプ： '行' 、
                    シンボル： '円' 、
                    symbolSize： 5 '' 、
                    データ[ 2、0、0、0、0、0、0、0 、0、0、1、0、0、0、1、1、0、1、0、0、0、0、0、1 ] 
                }、
                { 
                    名前： 'http://www.888.com' 、
                    タイプ： '行' 、
                    シンボル： '円' 、
                    symbolSize： 5 '' 、 
                    データ：[ 0、0、0、0、0、0、0、0、0、0、0、0、0、0、1、1、1、0、0、0、0、0、0、0 ] 
                }、
                { 
                    名前： 'http://www.999.com' 、
                    種類： 'ライン' 、
                    シンボル： 'サークル' 、
                    SymbolSize：」。5' 、
                    データ：[ 0、0、0、0、0、0、0、 0,0 ,. 1 ,. 1、0、0、0、0、。1、0、0、0、0、0、0、0、0 ] 
                }、
                { 
                    名： '外部リンクの総' 、
                    タイプ： 'バー' 、
                    barWidth：'60％」、
                    データ[ 14、6、1、0、2、5、4、1、11、8、6、7、15、5、11、21、21、6、17、7、7、 14、9、14 ] 
                }
            ] 
        }）
         VAR// echarts点击事件
        VAR OOP = text_data.slice（0、4 ）; 
        myChart.on（ 'legendselectchanged'、関数（paramsは）{
             // はconsole.log（paramsは）; 
            場合（text_data.length> 4 ）{
                 VARの legend_optionは= この.getOption（）;
                 VAR selectArr = Object.values（params.selected ）
                NUM = 0 ;
                用（VAR i = 0; I <selectArr.length; iは++ ）{ 
                    selectArr [I] === 真？NUM ++： "" ; 
                } 
                であれば（NUM> 4 ）{ 
                    oop.push（params.name）。
                } 
                であれば（NUM> 6 ）{
                     VARのほら= oop.slice（oop.length - 7、oop.length - 6）[0] + ' 。
                    legend_option.legend [ 0] [HAH] = .selected 偽。
                } 

            } 
            この.setOption（legend_option） 
        }）。
        window.onresize = 関数（）{ 
            myChart？myChart.resize（）： "" ; 
        }。
    </ SCRIPT>
</ BODY> 

</ HTML>
ダイレクトコピーが効果を見ることができます。上記ユーザが6までの表示をクリックすると、最初の三つの凡例と最後の初期表示を制限することです。もちろん、あなたは自分の定義の数のパラメータを変更することができます。
ヒント：
上記のデータは、単に閲覧の便宜のため、仮想です。
変数のスコープに影響を与えないためには、準備ができて内部でjQueryのjsの機能を置くことをお勧めします。
echarts凡例表示は番号、省略記号を制限し、デフォルトのスタイルを変更します

おすすめ
