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