图表插件echarts带选项卡切换
1、新建html文档。
2、书写hmtl代艨位雅剖码。<div class="data_wrap"> 艘早祓胂 <header class="rfm_header"> <ul> <li><a class="anim sition-link" href="RFM_data.html" data-ani msition-out="fade-out-left-sm">RFM模型分析</a></li> <li class="active"><a class="anim sition-link" href="R_data.html" data-animsition-out="fade-out-left-sm">R值分析</a></li> <li><a class="ani msition-link" href="F_data.html" data-an imsition-out="fade-out-left-sm">F值分析</a></li> <li><a class="ani msition-link" href="M_data.html" data-ani msition-out="fade-out-left-sm">M值分析</a></li> </ul> </header> <div class="an imsition"> <div class="data_time_set" id="data_r_set"> <div>最近付款时间在<span class="now_time">2017-1-20</span>前</div> <select name="drop2" class="ui-select"> <option value="1">一年</option> <option value="2">两年</option> <option value="3">全部</option> </select> <div>的客户</div> </div> <div class="data_time_set" id="data_M_set"> <div> R值时隔选择： <label> <input type="radio" checked name="date_radio" style="display: none;"/> 20天 </label> <label> <input id="customize" type="radio" name="date_radio" style="display: none;"/> 自定义 </label> <input type="text" class="date_set" value="0" disabled="disabled" /> 天 <button class="save">保存配置</button> </div> <div class="right_radiobox"> 指标选择： <label> <input type="radio" checked name="rfm_radio" style="display: none;"/> R值指标 </label> <label> <input type="radio" name="rfm_radio" style="display: none;"/> F值指标 </label> <label> <input type="radio" name="rfm_radio" style="display: none;"/> 会员等级指标 </label> </div> </div> <div class="data_jiage_set"> <table id="F_table" cellspacing="0" cellpadding="0"> <tr> <th>购买次数(F值)</th> <th style="min-width: 60px;">客户数</th> <th>客户占比%</th> <th width="140">累计占比%</th> <th>R ≤ 45(%)</th> <th>45 < R ≤ 90(%)</th> <th>90 < R ≤ 180(%)</th> <th>180 < R ≤ 365(%)</th> <th>R > 365(%)</th> </tr> <tr> <td>0</td> <td>1234</td> <td>1%</td> <td><span class="bar"></span></td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> </tr> <tr> <td>1</td> <td>1234</td> <td>1%</td> <td><span class="bar"></span></td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> </tr> <tr> <td>2</td> <td>1234</td> <td>1%</td> <td><span class="bar"></span></td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> </tr> <tr> <td>3</td> <td>1234</td> <td>1%</td> <td><span class="bar"></span></td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> </tr> <tr> <td>4</td> <td>1234</td> <td>1%</td> <td><span class="bar"></span></td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> </tr> <tr> <td>5</td> <td>1234</td> <td>1%</td> <td><span class="bar"></span></td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> <td>1%</td> </tr> </table> </div> </div> </div>
3、书写css代码。.rfm_header { height: 48px; border-bottom: 2px solid #c4ceda; }.rfm_header ul li { height: 48px; line-height: 48px; text-align: center; font-size: 16px; float: left; }.rfm_header ul li a { color: #37475e; padding: 0 15px; }.rfm_header ul .active { border-bottom: 2px solid #3498db; }.rfm_header ul .active a { color: #333333; font-weight: bold; }.data_time_set { height: 25px; -ine-height: 30px !important; color: #666; font-size: 12px; margin: 0 10px; }.data_time_set>* { float: left; margin-top: 5px; }.data_time_set { margin-top: 10px; }.now_time { padding: 0 5px; }/*RFM表格*/.tb_zero { background: #f9d793; }.tb_one { background: #d7ebf9; }.tb_ten { background: #b9dbf5; }.tb_half { background: #8fc7ed; }.tb_high { -background: #f8686d; background: #54a9df; }.tb_top { background: #3498db; }#RFM_table { margin-top: 15px; width: 100%; border-collapse: inherit; }#RFM_table td { text-align: center; border: none; color: #4d5573; }#RFM_table th { line-height: 30px; -border: 1px solid #CCCCCC; background: #f1f1f1; -color: white; }#RFM_table td>* { margin: 5px 0; }#F_table { margin-top: 15px; width: 100%; }#F_table th { line-height: 35px; border: 1px solid #CCCCCC; background: #676d7d; text-align: left; padding: 0 10px; color: white; }#F_table td { text-align: center; height: 35px; padding: 0px; text-align: right; padding: 0 10px; }#F_table td:nth-of-type(4) { text-align: left; }.right_radiobox { float: right; }#data_M_set>* { margin-top: 0px; margin-right: 10px; }#data_M_set .select-main { width: 100px; }#data_M_set .select-set { width: 48px; }#data_M_set .select-block { width: 100px; }#data_r_set .select-main:nth-child(1) { width: 300px; }#data_r_set .select-main:nth-of-type(1) .select-set { width: 88px; }#data_r_set .select-main:nth-of-type(1) .select-block { width: 300px; }.date_set { line-height: 25px; border: 1px solid #CCCCCC; border-radius: 3px; width: 80px; padding: 0 5px; color: #666666; }input:disabled { background: #eee; color: #999; }.save { height: 27px; border-radius: 3px; background: #ffaf48; color: white; box-shadow: none; border: none; cursor: pointer; font-family: "微软雅黑"; font-size: 12px; padding: 0 10px; }
4、书写并添加js代码。<script src="js/jquery.an imsition.min.js"></script> <script src="js/common.js"></script> <script src="js/jquery-labelauty.js"></script> <script src="js/jqbar.js"></script>
5、代码整体结构。
6、查看效果。
