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的朋友有一點點幫助。