利用Vue和Echarts实现双层tab嵌套的 柱状图

从接到任务到动手实践,它一直是一个随随便便给我绕懵的存在。谨以此博,记录结果,避免之后再走弯路。若有更好的方法,欢迎交流。
先看实现结果:
利用Vue和Echarts实现双层tab嵌套的 柱状图_第1张图片
由于4个图布局一模一样,只有数据源不一样,所以我选择在父组件,引入子组件4次,并在父组件获取数据传给子组件,此操作忽略。
下面为子组件的代码:

    <div class="targetcon " v-for="(item, index1) in this.datas" :key="index1">
      <div class="topictitle">
        <span class="iconfont2" v-if="idx == 0">span>
        <span class="iconfont2" v-if="idx == 1">span>
        <span class="iconfont2" v-if="idx == 2">span>
        <span class="iconfont2" v-if="idx == 3">span>
        {{ item.rootName }} 
      div>
      <ul class="targettab clear">
        <li
          v-for="(item1, index2) in item.result"
          :key="index2"
          :class="{ active: curridx1 == index2 }" 
                    

你可能感兴趣的:(前端,vue,echarts,前端,javascript)