大类包含子类的筛选器，显示信息列表和图表分析

数据处理上一篇已经说过，这里直接上整个逻辑层
结果是两个tabpane展示信息列表和图表分析
信息列表页面数据会跟input和下拉筛选有数据联动，input和下拉需要使用v-show=“activeName=='first”显示隐藏
整个银行舆情页面分成三块
tabpane页面布局使用绝对定位+overflow:autao;给个padding:30px 5%;左右百分比占位空间，width：100%; padding-bottom:100px;显示图表的底部空间
中间三大块整体div块域布局

盒模型布局流动性和规范性以及对齐一致性非常容易整齐

图表是三个在一起各站33%左右

  <div class="chart-three" v-if="this.$store.state.user.isShowChartList==true">
        <div class="Category-proportion">
            <p class="chart-title">类别占比</p>
            <!-- 类别占比图 -->
            <div id="Category-chart"></div>
        </div>
        <div class="Emotional-proportions">
            <p class="chart-title">情感倾向占比</p>
            <!-- 情感倾向占比图 -->
            <div id="Emotional-chart"></div>
        </div>
        <div class="Keyword-Cloud">
            <p class="chart-title">关键词云</p>
            <!-- 关键词云图 -->
            <div id="Keyword-chart"></div>
            <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->
        </div>
    </div>

列举银行分类，做法一致
每个大类别筛选各一行，大类的行包含类别名称和全部，
点击全部的时候以及全部的span标签都默认选中状态，大类别筛选项点击时默认显示子分类筛选项，子分类筛选根据大类别的id显示只需要在大类别的样式上加个
margin-bottom：15px隔开子类别，
子类别margin-left：150px； 盒模型布局包含width/height=height/width+padding不包含margin;
span标签想居中加padding+margin-right必须用display:inline-block;转成行内块元素

  <!-- 银行 -->
        <div class="screen-bank">
            <span class="sc-first">银行：</span>
            <span class="sc-bankall" @click="getBankAll">全部</span>
            <div class="bank-category">
                <span v-for="(item,i) in BankCategorySpan" :key="i" @click="getBankCategory(item.value,item.id)" :class="BankCategoryId===item.id?'active':null">{{item.value}}</span>
            </div>
        </div>
        <div class="guoyou-bank" v-if="BankCategoryId==1">
            <span v-for="(item,i) in guoyouBankSpan" :key="i" @click="getGuoyou(item.value,item.id)" :class="guoyouId===item.id?'active':null">{{item.value}}</span>
        </div>
        <div class="gufen-bank" v-if="BankCategoryId==2">
            <span v-for="(item,i) in gufenBankSpan" :key="i" @click="getGufen(item.value,item.id)" :class="gugenId===item.id?'active':null">{{item.value}}</span>
        </div>
        <div class="city-bank" v-if="BankCategoryId==3">
            <span v-for="(item,i) in cityBankSpan" :key="i" @click="getCity(item.value,item.id)" :class="cityId===item.id?'active':null">{{item.value}}</span>
        </div>

每个类别筛选器一致 类别头+v-if显示隐藏自己的子类，用div-flex布局
筛选器默认都是单选根据id单选时添加动态类：class=“cityId===item.id?'active:null”
cityid在方法中复制时不要用箭头函数，箭头函数里面拿不到this对象，就无法添加选中状态
点开每个大类会默认选中大类的全部，所以子类的每个id如cityId默认值设为1，添加active样式
子类选中时行类中全部的默认选中样式通过jquery设置css

 //城市单选
        getCity(v, i) {
            this.cityId = i;
            if (v != '全部') {
                this.newsPageData.page = 1;
                this.currentPage = 1;
                this.newsPageData.bankType = v;
                this.ChartPageData.bankType = v;
                //  this.getnewsPageList(this.newsPageData);
            } else {
                this.newsPageData.page = 1;
                this.currentPage = 1;
                this.newsPageData.bankType = "";
                this.ChartPageData.bankType = ""
                //  this.getnewsPageList(this.newsPageData);
            }
        },
        //情感分类
        getAffection(v, i) {
            $(".sc-affectionall").css('background', 'white');
            $(".sc-affectionall").css('color', '#000');
            this.affectionId = i;
            this.newsPageData.page = 1;
            this.currentPage = 1;
            this.newsPageData.emotion = v;
            this.ChartPageData.emotion = v;
            // this.getnewsPageList(this.newsPageData)
        },
        //筛选全部
        getAffectionAll() {
            this.affectionId = null
            $(".sc-affectionall").css('background', '#378EFF');
            $(".sc-affectionall").css('color', 'white');
            this.newsPageData.emotion = "";
            this.newsPageData.page = 1;
            this.currentPage = 1;
            this.ChartPageData.emotion = "";
            // this.getnewsPageList(this.newsPageData)
        },

图表的显示是在页面的第二个tab里，所以数据请求是在clic的name=second判断里进行，避免空白让每次加载的时候在activated钩子函数里把name设置为first，v-if的值设为false;由于多个其他tab页面都会设置false,所以把值设到store里面存储，在其他页面引用import { mapMutations } from ‘vuex’;使用mapMutations扩展mutation里面的方法，在methods方法里展开 …mapMutations([‘setIsShowChartList’]),在文件任何一个方法中设置true或false就可以了。
echarts图表强制数据更新渲染是在setoption时添加一个true强制更新参数，值得注意的是每次页面上的与图表相关联的判断显影或者其他修改大小调整页面结构都需要在绘图的同时再调用一次数据，重新加载一次数据，页面的渲染才会同步不出错。