記錄使用v-charts(echarts)的時候遇到的問題及解決方法

最近項目中需要用到v-charts,遇到的問題:

1.需要將不同列的柱子顏色設置成不一樣的(如下圖效果).我開始想的是在colors屬性的數組列表中添加不同的顏色就可以了,發現並不起作用.

需要去給它在settings里面配置樣式才行

<template>
    <VeHistogram :data="chartData" :settings="chartSettings"></VeHistogram>
</template>

<script>
export default {
  data() {
    this.chartSettings = {
      itemStyle: {
        //每個柱子的顏色即為colorList數組里的每一項，如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
        color: function(params) {
          var colorList = ['#FBD95C', '#F2A7C2', '#4CD0DD', '#E386EE'];
          return colorList[params.dataIndex];
        }
      }
    };
  }
};
</script>

2.x軸的文字出現了顯示不全的問題,測試了一下文字比較短時可以完整顯示,猜測是文字過長導致的顯示不全.

通過以下代碼將文字設置成傾斜一定角度,將全部內容顯示出來.

<template>
    <VeHistogram :data="chartData" :settings="chartSettings" :extend="chartExtend"></VeHistogram>
</template>
<script>
export default {
  data() {
    this.chartSettings={
       xAxis: {
        axisLabel: {
          margin: 15, // 刻度標簽與軸線之間的距離
          interval: 0, // 坐標軸刻度標簽的顯示間隔
          rotate: 10, // 刻度標簽旋轉的角度
          align: 'center' // 文字水平對齊方式
        }
      }
    }
  }
};
</script>

3.修改柱狀圖的上下左距離容器的距離.

this.chartExtend={
   grid: {
        left: '5%',
        right: '5%',
        bottom: '3%',
        top: '10%',
        containLabel: true
    }  
}

 4.在el-tabs組件中的el-tab-pane引入echarts圖表時,打開頁面時圖表無法顯示,需要縮小瀏覽器框口才能顯示.猜測可能是渲染的問題,聯想到之前使用v-show的時候也遇到過類似的渲染問題,給圖表添加了一個v-if,問題得到解決.

<el-tabs v-model="activeName">

<el-tab-pane label="構成比例" name="first">
      <VePie
        height="150px"
        :data="formChartData"
        :settings="formChartSettings"
        :tooltip-visible="false"
        legend-position="bottom"
        :extend="formChartExtend"
      ></VePie>
    </el-tab-pane>
    <el-tab-pane label="產值總覽" name="second">
      <p class="title">各區縣生產總值情況表</p>
      <VeHistogram
        v-if="activeName=== 'second' "
        height="200px"
        :data="productChartData"
        :extend="productChartExtend"
        :settings="productChartSettings"
        :legend-visible="false"
      ></VeHistogram>
    </el-tab-pane>
</el-tabs>

export default {
    data() {
      return {
        activeName: 'first'
      };
    }
  };

 5.使用柱形圖時,有多簇柱形,需要設置每簇之間的間距.

每簇之間的間距:   barCategoryGap 

簇內每個柱之間的距離:  barGaps 

 

有一個問題就是使用barCategoryGap時不能同時使用barWidth來改變柱子的寬度,否則barCategoryGap無法生效.

 

6.只保留橫向軸線和水平線

grid: {
    show: false
}
xAxis: {
    splitLine: {
        show: false
    }
}

 

7.vcharts實現堆疊柱狀圖

實現疊柱狀圖的核心是要在series里面設置stack屬性,只要兩個或者多個柱子的stack屬性值是相同的就會堆疊在一個,否則就會並排放.

series: {
    stack: '適宜程度'
}

 

8.當橫坐標數據過多時,內容會擠在一塊,這時候需要給橫坐標添加滾動條,添加滾動條相關的屬性是dataZoom,但是這個屬性與其他的屬性不同,其他的屬性只要引入了echarts后就可以直接使用了,dataZoom需要單獨引入:

import 'echarts/lib/component/dataZoom';

 9.vcharts給柱狀圖等圖表綁定點擊事件:

<VeHistogram
        height="200px"
        :data="productChartData"
        :extend="productChartExtend"
        :settings="productChartSettings"
        :events="barClickEvent"
></VeHistogram>

<script>
export default {
    data() {
        this.barClickEvent = {
            click:function(e){
                console.log(e)
             }
        }
    }
}