echartsは、ヒストグラムをクリックすると、Clickイベントがトリガされます

プロジェクトの要件：
データが棒グラフで示されている1 echarts
対応するバーグラフが表示対応のポップ2.クリック

echartsは、主に「クリック」イベントで使用する場合、デモを使用します。

 
VAR myChart = echarts.init（のdocument.getElementById（DOMS））; //初期化オブジェクト
myChart.on（' クリック'、機能（のparams ）{
             VARの答え= のparams .seriesName;
             VARの数= のparams .nameの;
             VARカウント値= のparams .VALUE。
            console.log（paramsは）。
            console.log（' 题号：'、paramsは .componentIndex + 1、paramsは.nameの）。
            console.log（' 選択した答えは：'、paramsは.seriesName）。
            console.log（' 選択された回答数は：'、paramsは.Valueのを）。
                
     
　　　　 // getStuAnswer（params.seriesName、examClassId、params.name）; // 呼び出しインターフェース
}）

ケース：

だっ examClassId = 1470 ;
たデータXは= [ ' 1 '、' 2 '、' 3 '、' 4 ' ]。
たデータY = [ 99、90、70、80 ]。
addStatic（' チャート' 、DATAX、DATAY、examClassId）。
/ * *
     *統計の回答
     * * /
    関数addStatic（DOMS、DATAX、DATAY、examClassId）{
        だっ myChart = echarts.init（のdocument.getElementById（判定））;
       オプション= {
                ツールチップ：{
                    トリガー：「軸」
                }、
                ツールボックス：{
                    ショー：真、
                    機能：{
                        magicType：{ショー：真、タイプ：[ ' 行'、' バー' ]}、
                        リストア：{ショー：真}
                        saveAsImage：{ショー：真}
                    }
                }、
                X軸：{
                    タイプ：「カテゴリ」、
                    データ：DATAX、
                    名前：「質問」
                }、
                Y軸：{
                    タイプ：「値」、
                    名前：「番号」
                }、
                dataZoom：[{
                    ショー：真、
                    初期値：0 、
                    endValueの：10 、
                }、
                {
                    タイプ：「内部」、
                    初期値：1 、
                    endValueの：10 、
                }]、
                グリッド：{
                    左：' 4％' 、
                    右：' 4％' 、
                    下：' 3％' 、
                    containLabel：真、
                }、
                シリーズ：[{
                    データ：データY、
                    タイプ：「バー」、
                    barWidth：20 、
                    itemStyle：{
                         正常：{
                             正常：{
                                 色：' ＃1 4ad2ff '
                             }、
                            ラベル：{
                                ショー：真、
                                位置：「トップ」、
                                フォーマッタ：' {C}人'
                            }
                        }
                    }
                }]
            }。
        myChart.clear（）;
        myChart.setOption（オプション）。
        window.addEventListener（' リサイズ' 、関数（）{myChart.resize（）;}）
        
        myChart.on（ 'クリック'、機能（のparams）{//主要代码
            するvar答え=のparams.seriesName;
            VARの数=のparams.nameの;
            VARカウント値=のparams.VALUE。
            console.log（paramsは）。
            console.log（' 题号：'、paramsは .componentIndex + 1、paramsは.nameの）。
            console.log（' 選択した答えは：'、paramsは.seriesName）。
            console.log（' 選択された回答の数：'、paramsは.Valueのを）;
             // getStuAnswer（params.seriesName、examClassId、params.name）; 
            layer.open（{
                タイプ：2 、
                タイトル：「最初の」 + +ナンバー「タイトル選択した答えは：」 +答え+ 「生徒がいた」 +カウント値+ 「人」、
                エリア：[ ' 500pxなど'、' 500pxなど' ]、
                日陰：0.2 、
                MAXMIN：真、
                内容：' stuAnswerList.html ' 、
                成功：機能（layero、インデックス）{
                    // 取得サブページのiframe 
                    VARのiframeウィンドウ= [ ' layui-レイヤのiframe ' + インデックス];
                    setTimeout（関数（）{
                        iframe.init（答えは、examClassId、数）;
                    }、200 ）。
                }
            }）;
            
        }）
    }
    / * *
    *学生は、このオプションを選択しWhoChoseTheAnswer
    * /
    関数getStuAnswer（答え、examClassId、数）{
        $アヤックス（{
            URL：' / XXXXXXXX / whoAnswer ' 、//インタフェース
            タイプ：「ポスト」、
            データ：{答え：答え、examClassId：examClassId、数：数}、
            成功：機能（RES）{
                console.log（RES）。
                もし（res.code == " 0000 " ）{
                     場合（res.data！= nullの）{
                         場合（res.data.length！= 0 ）{
                             VARのhtml = ' の<div> <ulのクラス= "stuList"> ' ;
                            $ .each（res.data、機能（I、ELOM）{
                                もし（（I + 1）== {res.data.length）
                                    HTML + = ' <LI> ' + elom.info + ' <スパンのスタイル= "マージン左：10pxの;"> ' + elom.name + ' </ span>を</ LI> </ UL> ' 
                                } 他{
                                    HTML + = ' <LI> ' + elom.info + ' <スパンのスタイル= "マージン左：10pxの;"> ' + elom.name + ' </ span>を</ LI> '
                                }
                            }）
                            HTML + = ' </ div> ' ;
                            layer.open（{
                                タイトル：「最初の」 + +ナンバー「：質問には、答えを選択し、」 +答え+ 「学生情報を」、
                                内容：HTML、
                                エリア：[ ' 520px '、' 520px ' ]、
                                closeBtn：0 、
                                はい：機能（）{
                                    layer.closeAll（）;
                                }
                            }）;
                        }
                    }
                }
            }、
            エラー：関数（E）{
                console.log（' サーバー異常' ）;
            }
        }）
    }

レンダリング：