Echarts 正常柱状图X轴字体倾斜

1. 使用 echarts 版本: "echarts": "^4.3.0"

2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S

3. 在 main.js 入口文件中全局引入:

    import* Vue *from* 'vue'
    import* Echarts *from* 'echarts' *// 引入Echarts*
    Vue.prototype.$echarts = Echarts
   

4. echarts 配置文件( 文件名 echartsMould.js )

   1. 我这边的处理方式是将 echarts 的配置内容抽取为单独的 JS 文件，这样我维护起来会非常的方便舒服。
   
   2. 另外这样的处理方式也会减少 .vue 文件的大小，代码看起来也会非常方便整洁。 
   
   3. 这样的处理方式也方便组件化的实现。
   

import echarts from 'echarts'
/**
 * 3. 车辆来源--carSource.vue 与 mapEchart.vue
 */
var option_carPillar = {
  color: ['#3398DB'],
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    textStyle: { // 设置提示框的对齐方式
      align: 'left'
    }
  },
  grid: {
    left: '3%',
    right: '2%',
    top: '10px',
    bottom: '0',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['XXX 市', 'yyy 市', 'ZZZZ 市', '安阳市'],
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: function (data) {
          let valueTxt = ''
          if (data.length > 6) {
            valueTxt = data.substring(0, 7) + '...'
          } else {
            valueTxt = data
          }
          return valueTxt
        },
        textStyle: {
          fontSize: '12',
          fontFamily: 'PingFangSC-Regular',
          color: '#86A5C3' // 坐标值的具体的颜色
        },
        // 设置字体的倾斜角度
        interval: 0,
        rotate: 30
      },
      axisLine: {
        lineStyle: {
          color: '#38449C' // 轴线的颜色
        }
      },
      splitLine: { // 去除背景网格线
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: { // 刻度
        show: false // 不显示刻度线
      },
      axisLine: { // 设置轴线
        show: false
      },
      axisLabel: {
        textStyle: {
          fontSize: '12',
          fontFamily: 'ArialMT',
          color: '#86A5C3' // 坐标值的具体的颜色
        }
      },
      splitLine: {
        lineStyle: { // 设置网格线的颜色
          color: '#1E2240'
        }
      }
    }
  ],
  series: [
    {
      name: '车辆来源(XX)',
      type: 'bar',
      data: [222,234,532,324],
      barWidth: 12, // 设置柱状图的宽度
      itemStyle: {
        normal: {
          color: '#00ADFF'
        }
      }
    }
  ]
}

5. .vue 文件，当前 echarts 图表组件所在文件

6. echarts 图表图片展示

那个图

如果对你有所帮助，大家喜欢可以点个关注；如有问题还望不吝赐教，本人会及时更改。(如要转载，请注明出处)。