クリッカブルヒストグラム（ミニマリストスタイル）

プレビュー住所：  https://gallery.echartsjs.com/editor.html?c=x38vh7NTkg&v=7

VAR DATA0 = [0、0、0、0、0、0、0 ]
 VARデータ= [60、85、110、160、90、80、190 ]
 VaRの XDATA = '06 -02」、'06 -03 ''06 -04' 、'06 -05'、'06 -06' 、'06 -07」、'06 -08' ]
 VAR色= [ '#EAEAEA'、 '＃454545'、 '＃000000' ]
 // X軸の定義は、可変数XINDEXを表し、Ymonthヒストグラムはラベル値を表し
VAR XINDEX、Ymonthを

オプション = {
    backgroundColorの：カラー[ 2 ]、
     // 棒グラフclickイベントに置き換え近いプロンプトボックス、
    ツールヒント：{
        トリガー：「なし」
    }、
    題名： {
        テキスト：「クリッカブルヒストグラム（ミニマリストスタイル）」、
        言外の意味：「の代わりにクリックイベントに散布図とヒストグラムを使用してのヒストグラム終点」、
        TEXTSTYLE：{
            色：色[ 0 ]、
            fontSize： 26
        }、
        subtextStyle：{
            色：色[ 1 ]、
            fontSize： 14
        }、
        左：「中央」、
        トップ： "15％"
    }、
    グリッド：{
        左： "10％"を、
        トップ： "35％" 、
        下： "15％" 、
        右： "10％" 、
        containLabel：真
    }、
    X軸：{
        データ：XDATA、
        タイプ：「カテゴリ」、
        分割線：{
            ショー：偽
        }、
        axisLine：{
            ショー：偽
        }、
        axisTick：{
            ショー：偽
        }、
        たAxisLabel：{
            色：色[ 1 ]、
            fontSize： 14 、
            マージン： 20
        }
    }、
    Y軸：{
        タイプ：「価値」、
        splitNumber： 4 、
        間隔： 50 、
        分割線：{
            ショー：真、
            lineStyle：{
                色：色[ 1 ]、
                タイプ：「破線」
            }
        }、
        axisLine：{
            ショー：偽、
        }、
        axisTick：{
            ショー：偽
        }、
        たAxisLabel：{
            色：色[ 1 ]、
            fontSize： 14
        }
    }、
    シリーズ：[{
            タイプ：「バー」、
            barWidth： 4 、
            日付：日付、
            色：色[ 0 ]、
            ラベル：{
                ショー：真、
                位置： '上部' 、
                 // タグスケール値位置 
                オフセット：[0、-15 ]、
                fontSize： 16 、
                フォーマッタ：関数（paramsは）{
                     //はリターンが0よりも大きい、またはかどうかを判断するデータが電流に対応する場合
                    IF（params.value params.value === == 0 ||！Ymonth）{
                         戻り '' 
                    } 他{
                         戻りparams.value
                    }
                }
            }
        }、
        // 円筒形端として散布図の両方
        {
            タイプ：「散布」、
            symbolSize： 8 、
            itemStyle：{
                borderWidth： 2.5 、
                BORDERCOLOR：色[ 0 ]、
                色：色[ 2 ]、
                不透明度： 1
            }、
            サイレント：真、
            日付：DATA0
        }、
        {
            タイプ：「散布」、
            symbolSize： 8 、
            itemStyle：{
                borderWidth： 2.5 、
                BORDERCOLOR：色[ 0 ]、
                色：色[ 2 ]、
                不透明度： 1
            }、
            サイレント：真、
            日付：
        }

    ]
}

// 各ホットゾーンイベントデータのは、クリック 
myChart.getZr（）ON（ 'クリック'、関数（paramsは）{
     VARの pointInPixel = [params.offsetX、params.offsetY]
     IF（myChart.containPixel（ 'グリッド'を、pointInPixel））{
         VAR pointInGrid = myChart.convertFromPixel（{seriesIndex：0 }、pointInPixel）
         // X軸番号 
        XINDEX pointInGrid = [0 ]
         // 取得チャートオプション
        のvar OP = myChart.getOption（）
         // GETグラフ我々は、データが欲しい 
        Ymonth = op.series [0 ] .dataの[XINDEX]
         // はconsole.log（ 'データの' + XINDEX + 'をクリック'）
        myChart.setOption（{
            X軸：[{
                たAxisLabel：{
                    色：関数（値、指数）{
                         リターン指数=== XINDEX？色[0]：色[1 ]
                    }
                }
            }]
        }）
    }
}）