vue项目使用v-charts的柱形图的各种样式和数据配置

找了很多网上关于v-charts的柱形图使用，我发现我一模一样的配置就是没有效果，原来是因为我是按需引入的，

//按需引入
import VeHistogram from 'v-charts/lib/histogram';
Vue.component(VeHistogram.name, VeHistogram);

搞了半天，就部分配置属性起作用，后来改成了全部引入，才改得了e-charts官方配置文档的那些参数，因为没时间了，按需引入后面再搞回来，

//全部组件引入，有空再研究按需引入
import vCharts from 'v-charts';
Vue.use(vCharts);

v-charts文档：https://v-charts.js.org/#/histogram ,

e-charts官网文档地址：https://www.echartsjs.com/zh/option.html#dataZoom-inside.startValue ,

我的基本需求是实现下面的效果图，还能左右滑动展示更多的数据，先来个配置完的效果图:

下面是我的页面的具体代码及配置：

//html部分

<ve-histogram
    class="myve"
    :data="chartData"
    :settings="vchartsConfig.setting"
    :extend="vchartsConfig.extend"
    ></ve-histogram>

//js部分
  data() {
    return {
　　// v-charts配置参数
      vchartsConfig: {
        setting:{
          // 别称
          labelMap: {
            'area': '地区',
            'count': '拓展数',
          },
        },
        extend: {
          title:{
            show:false,
            text:'实时数据',
            subtext:'各城市对应的拓展',
            // textAlign:'center',
          },
          // 图标顶部的标题及按钮
          legend:{
            show:false,
          },
          // 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>3){
                  return v.substring(0,3)+'...'
                }
                return v
              },
            },
            // X轴下面的刻度小竖线
            axisTick:{
              show:false,
              alignWithLabel:true,//axisLabel.boundaryGap=true时有效
              interval:0,
              length:4,//长度
            },
            // 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:[
            {
              type: 'inside',
              show: true,
              xAxisIndex: [0],
              startValue: 0,
              endValue: 4,
              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 = 20;
              i.itemStyle={
                barBorderRadius:[10,10,10,10],
                color:'#FF6633',
                borderWidth:0,
              };
              i.label={
                color:'#666',
                show:true,
                position:'top',
                // backgroundColor:'yellow',
              };

            });
            return v;
          },
        }
      },
      // v-chats列表数据
      chartData: {
        columns: ["area", "count"],
        rows: [
          { "area": "广州市", "count": 20 },
          { "area": "战狼3", "count": 30 },
          { "area": "2222", "count": 12 },
          { "area": "3333", "count": 42 },
        ],
      },

    };
  },

我是第一次用这个v-charts，最终还是要去看e-charts的官方文档，研究了半天，现在对e-charts的所有配置参数基本都了解了，

希望对第一次使用v-charts的朋友有一点点帮助。