v-charts x軸字體斜顯示

如下圖，因為X軸內容太多，放不下，插件默認間隔顯示
需求：X軸內容要全部顯示出來（只有斜顯示或固定寬多余的用省略代替，本來需要就是想顯示全部內容，所以只能取斜顯示的方案）

先看看v-charts的文檔：

通過extend屬性實現對已配置好的內部屬性進行單獨的設置， extend為對象類型，對象內的屬性可以是函數，也可以對象，也可以是其他類型的值

• 當屬性為函數時，設置的是函數的返回值
• 當屬性為對象時，如果在options中對應的屬性為對象(eg: tooltip)或包含對象的數組(eg: series)， 對應的配置會被合並，否則將直接覆蓋對應的配置

 用法如下：

this.chartExtend = {
        series (v) {
          v.forEach(i => {
            i.barWidth = 10
          })
          return v
        },
        tooltip (v) {
          v.trigger = 'none'
          return v
        }
      }
      /* 等同於
        this.chartExtend = {
          series: {
            barWidth: 10
          },
          tooltip: {
            trigger: 'none'
          }
        }
        等同於
        this.chartExtend = {
          'series.0.barWidth': 10,
          'series.1.barWidth': 10,
          'tooltip.trigger': 'none'
        }
      */

============================================================================

回到上面的需求上，要實現這個效果，也需要用到formatter格式化方法，效果如下圖（紅框X軸名稱）

不多說，直接上代碼：

<template>
  <ve-histogram
    :data="chartData"
    :extend="chartExtend">
  </ve-histogram>
</template>

<script>
  export default {
    data () {
       this.chartExtend = {
         // 柱子寬度
          series: {
            barWidth: 10
          },
         // x軸字體斜顯示
         xAxis: {
           axisLabel: {
             margin: 15,
             interval: 0,
             rotate: 30,
             formatter: name => {
               // eslint-disable-next-line
               return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…')
             }
           },
           triggerEvent: true
         }
        }
      return {
        chartData: {
          columns: ['日期', '成本', '利潤'],
          rows: [
            { '日期': '1月1日', '成本': 15, '利潤': 12 },
            { '日期': '1月2日', '成本': 12, '利潤': 25 },
            { '日期': '1月3日', '成本': 21, '利潤': 10 },
            { '日期': '1月4日', '成本': 41, '利潤': 32 },
            { '日期': '1月5日', '成本': 31, '利潤': 30 },
            { '日期': '1月6日', '成本': 71, '利潤': 55 },
            { '日期': '1月6日', '成本': 21, '利潤': 45 },
            { '日期': '1月7日', '成本': 31, '利潤': 35 },
            { '日期': '1月8日', '成本': 11, '利潤': 35 },
            { '日期': '1月9日', '成本': 51, '利潤': 35 }
 ]

 } } } } </script>