echart k线图之交易策略信号展示图（一）

本章为基本结构样式以及js操作事件。
//css
.container{
font-size: 1rem;
color: #222222;
}
.header{
overflow: hidden;
font-size: 1rem;
padding-left: 0.125rem;
padding-right: 0.125rem;
border-bottom: 0.0625rem solid #E6E6E6;
}
.header-2{
overflow: hidden;
font-size: 1rem;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.box-1,.box-2{
font-size: 0;
overFlow: auto; /* visible ：却省的 hidden auto scroll /
overFlow-x: scroll;
white-space: nowrap;/文本不会换行，文本会在在同一行上继续/
/padding: 0.125rem 0;/
}
.box-1::-webkit-scrollbar,.box-2::-webkit-scrollbar{
height: 0.5rem;
}
.box-1::-webkit-scrollbar,.box-2::-webkit-scrollbar {
display: none;
}
/滚动条里面小方块/
.box-1::-webkit-scrollbar-thumb,.box-2::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #C2C2C8;
}
.box1,.box2{
font-size: 1rem;
position: relative;
padding: 0 0.9375rem;
display: inline-block;/行内块元素*/
}
.box-1 .box1 a,.box-2 .box2 a{
padding: 0.5rem 0;
}
.box-1 .box1 .selected,.box-2 .box2 .selected{
color: #03C186;
}
.box-1 .box1 .selected::after,.box-2 .box2 .selected::after{
position: absolute;
left: 0;
bottom: 0;
content: ‘’;
width: 100%;
height: 3px;
background-color: #03C186;
border-radius: 1.5px;
}

#charts_k{
    width: 100%;
    height: 300px;
    padding: 30px 5px 5px 5px;
}

.k_line{
    border-bottom: 0.0625rem solid #C2C2C8;
    z-index: 1;
}
.k_title{
    padding: 0 10px;
    white-space: nowrap;
    border-right: 0.0625rem solid #C2C2C8;
}

//HTML

<div class="container-index">
<div class="header">
<div class="box-1">
<div class="box1"><a class="center selected" value="btc">BTC/USDT</a></div>
<div class="box1"><a class="center" value="eth">ETH/USDT</a></div>
<div class="box1"><a class="center" value="eos">EOS/USDT</a></div>
<div class="box1"><a class="center" value="bch">BCH/USDT</a></div>

    </div>
</div>
<div id="charts_k" class="center"></div>
<div class="k_line flex">
    <div class="k_title center">k线周期</div>
    <div class="header-2">
        <div class="box-2">
            <!-- <div class="box2"><a class="center selected" value="5m">5分钟</a></div> -->
            <div class="box2"><a class="center selected" value="15m">15分钟</a></div>
            <div class="box2"><a class="center" value="30m">30分钟</a></div>
            <div class="box2"><a class="center" value="60m">1小时</a></div>
            <!-- <div class="box2"><a class="center" value="120m">2小时</a></div> -->
            <div class="box2"><a class="center" value="240m">4小时</a></div>
        </div>
    </div>
</div>

<div id="content" class="content-index"></div>
<div class="refreshText center"></div>

</div>

//JS
$(document).ready(function(){
$(‘.box-1 .box1’).click(function(){
let index = $(this).index();
k_bz = $(this).find(‘a’).attr(“value”);
$(‘.box-2 .box2 a’).each(function(i, n){
if($(n).hasClass(‘selected’)){
k_time = $(n).attr(“value”);
}
});
$(‘.box-1 .box1 a’).removeClass(“selected”);
$(‘.box-1 .box1 a’).eq(index).addClass(“selected”).siblings().removeClass(“selected”);
k_key = k_bz + k_time + k_gdd;

            get_k_charts();
            get_tx_info(k_key);
        });

        $('.box-2 .box2').click(function(){
            let index = $(this).index();
            k_time = $(this).find('a').attr("value");
            $('.box-1 .box1 a').each(function(i, n){
                if($(n).hasClass('selected')){
                    k_bz = $(n).attr("value");
                }
            });
            $('.box-2 .box2 a').removeClass("selected");
            $('.box-2 .box2 a').eq(index).addClass("selected").siblings().removeClass("selected");
            k_key = k_bz + k_time + k_gdd;
            myChart.clear();
            initialization();
            get_k_charts();
            // get_tx_info(k_key);
        });

});