FineReport图表旋转怎么做

关于FIneReport设计图表，今天我做的是柱状图，所以演示的也是柱状图。
正常情况下，柱状图的x轴显示的是分类，y轴显示的是数量，但客户的需求是x轴显示数量，y轴显示分类。

问题

官网给的图例都是y轴表示数量，如下图所示

现在需要y轴显示分类，如下所示

实现方案

实现方案有两种

一、调用Echarts（不推荐，可直接看方法二，对集成Echart感兴趣可以了解下）

由于是第一次用这个设计器写报表，设计器里没有提供这种横向的柱状图，我在官方的帮助文档也没找到旋转是怎么操作的，开始以为没有，偶然看到Echart里面有一个对应的图形，刚好FineReport设计器也可以引入Echart

实现步骤：
1、安装Echart插件，之后选择Echart图形，具体可以看一下官方文档：https://help.fanruan.com/finereport/doc-view-4468.html
2、准备一个数据集，添加数据结构，这里官方文档比较详细，但官方写的也是一个竖向的，我来记录下横向的区别
3、打开代码编辑器

// data1为你的数据集
var TableData = getData('data1')
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  title:{
    text:'Approval审批情况',
    left:'center'
  },
  legend: {
    x:'center',
    y:'bottom'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '6%',
    containLabel: true
  },
  xAxis: {
  },
  yAxis: {
    type: 'category',
    
  },
  dataset:{
    source:TableData
  },
  series: [
    {
      name: '未完成',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      emphasis: {
        focus: 'series'
      },
     
    },
    {
      name: '完成',
      type: 'bar',
      stack: 'total',
      
      label: {
        show: false
      },
      emphasis: {
        focus: 'series'
      },
   
    }, 
  ]
};

来对比一下官方的

由于我们将分类移到了y轴，所以，只需要改动这里就好啦
运行代码，可以看到是想要的效果

二、直接旋转

将正常的竖形图放置好，根据下图顺序走


完成

唉，如此简单我还研究了一上午的Echart😮‍💨