viser bar组件滚动缩放

Question

使用jeecg-boot框架中的bar组件（即viser中的bar组件），数据过多时图表X轴文字显示不全，无法滚动显示,请问如何操作
代码如下

template>
  
  <a-card :bordered="false">
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="二手房小区" key="1">
        <a-row>
          <a-col :span="10">
            <a-radio-group :value="barType" @change="statisticst">
              <a-radio-button value="xiaoqu">按小区统计</a-radio-button>
              <a-radio-button value="district">按城区统计</a-radio-button>
              <a-radio-button value="area">按区域统计</a-radio-button>
              <a-radio-button value="city">按城市统计</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="12" v-if="barType !== 'city'">
            <a-form-model-item label="省市县级联" prop="areaLinkage2">
              <j-area-linkage v-model="formData.areaLinkage2" type="select"/>
            </a-form-model-item>
          </a-col>
        
          <a-col :span="12">
            <bar class="statistic" title="统计" :dataSource="countSource" :height="400"/>
          </a-col>
        </a-row>
        
      </a-tab-pane>
       
      
    </a-tabs>
  </a-card>
</template>

<template>
  <div :style="{ padding: '0 0 32px 32px' }" >
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
      <v-tooltip/>

      <v-axis/>
      <v-bar position="x*y"/>
<!--      <scrollable-tab-bar></scrollable-tab-bar>-->
    </v-chart>
    <v-plugin>
      <v-slider
        container='viser-slider-1'
        width="auto"
        height="26"
        xAxis="time"
        yAxis="flow"
      ></v-slider>
    </v-plugin>
  </div>
</template>

<script>
  import { triggerWindowResizeEvent } from '@/utils/util'
  import ScrollableTabBar from 'D:/HousePrice-VUE/House-Price-Data-Visualization-Platform/node_modules/ant-design-vue/es/vc-tabs/src/ScrollableTabBar.js'
// import { Slider } from 'ant-design-vue'

  export default {
    name: 'Bar',
    components: {
      ScrollableTabBar
    },
    props: {
      dataSource: {
        type: Array,
        required: true
      },
      yaxisText: {
        type: String,
        default: 'y'
      },
      title: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 254
      }
    },
    data() {
      return { padding: ['auto', 'auto', '40', '50'] }
    },
    computed: {
      scale() {
        return [{
          dataKey: 'y',
          alias: this.yaxisText,
          formatter: '.2%',
        }]
      }
    },
    mounted() {
      triggerWindowResizeEvent()
    }
  }
</script>

Answer 1

如果数据比较多的情况下，图表下方的展示可能就需要滚动展示了，否则，会把图表挤上去的。

下面的不只是5项，就需要滑动效果，高度固定下来

itemWidth={150}

position='bottom'

useHtml={true}

flipPage={false}

itemGap={0}

containerTpl={'

'
+ '

'
+ '

+ '

'}
itemTpl={'

' +
'' +

'{value}

'}
/>

.ytd_chart_container_legend,.ytd_modal_chart_container_legend {

.g2-legend {

width:100%;

height: 50px !important; // 定高

overflow-x:hidden !important;

box-sizing: border-box;

padding: 0 0 0 30px !important;

}

.g2-legend-list-item{

margin-right: 20px !important;

}

.g2-legend-list{

text-align: center !important;

}

}