最终效果

图表配置选项

 // v-charts配置参数
        vchartsConfig: {
          setting:{
            // 别称
            labelMap: {
              'area': '',
              'count': '',
            },
          },
          extend: {
            title:{
              show:true,
              // text:'数据',
              // subtext:'',
              textAlign:'center',
            },
            // 图标顶部的标题及按钮
            legend:{
              show:true,
            },
            // backgroundColor:'red',//整个组件的背景颜色
            //X轴线
            xAxis: {
              // name: "地区",
              type:'category',
              show:true,
              // 坐标轴轴线
              axisLine:{
                show:false,
              },
              // 坐标轴刻度
              axisTick:{
                show:false,
              },
              // 坐标轴每项的文字
              axisLabel:{
                showMaxLabel:true,
                showMinLabel:true,
                // color:'#3a3a3a',
                rotate:0, //刻度文字旋转，防止文字过多不显示
                margin:8,//文字离x轴的距离
                boundaryGap:true,
                // backgroundColor:'#0f0',
                formatter:(v)=>{
                  // console.log('x--v',v)
                  if(v.length>6){
                    return v.substring(0,6)+'...'
                  }
                  return v
                },
              },
              // X轴下面的刻度小竖线
              axisTick:{
                show:false,
                alignWithLabel:true,//axisLabel.boundaryGap=true时有效
                interval:0,
                length:6,//长度
              },
              // x轴对应的竖线
              splitLine: {
                show: false,
                interval: 0,
                lineStyle:{
                  color:'red',
                  backgroundColor:'red',
                }
              }
            },
            yAxis: {
              show:true,
              offset:0,
              // 坐标轴轴线
              axisLine:{
                show:false,
              },
              // x轴对应的竖线
              splitLine: {
                show: false,
              },
              // 坐标轴刻度
              axisTick:{
                show:false,
              },
              boundaryGap:false,
              axisLabel:{
                color:'#3a3a3a',
              },
            },

            // 滚动组件参数
            dataZoom:[
              //滚动组件参数上下两个的必须，注意点是end的不宜过大根据效果进行调整
              {
                show: true,
                realtime: true,
                start: 0,
                end: 5
              },
              {
                type: 'inside',
                show: true,
                realtime: true,
                start: 0,
                end: 5,
                xAxisIndex: [0],
                startValue: 0,
                //显示的多少数据
                endValue: 12,
                zoomLock:true,//阻止区域缩放
              }
            ],

            // 柱形区域
            grid: {
              show: true,
              // backgroundColor: "#FFF6F3",
              borderColor: "#FFF6F3",
              // containLabel:false,
            },

            // 每个柱子
            series(v) {
              // console.log("v", v);
              // 设置柱子的样式
              v.forEach(i => {
                console.log("series", i);
                i.barWidth = 30;
                i.itemStyle={
                  // barBorderRadius:[10,10,10,10],
                  // color:'#FF6633',
                  borderWidth:0,
                };
                i.label={
                  // color:'#666',
                  show:true,
                  position:'top',
                  // backgroundColor:'yellow',
                };

              });
              return v;
            },
          }
        },

配置使用

<a-card :bordered="true">
        <!--<ve-line :data="chartData" :extend="extend"></ve-line>-->
        <!--<ve-line :extend="extend" :data="chartData_shuangshuju" :settings="chartSettings"></ve-line>-->
        <ve-histogram :data="chartData_shuangshuju_lpjg" :settings="vchartsConfigjiage.setting"
                      :extend="vchartsConfigjiage.extend"></ve-histogram>
      </a-card>