TMom

外观

图表+表格组合 ​

图表设置 中新增一个图表，配置图表组件的option属性即可

栅格布局 ​

用来表示该图表组件在一行中所占的比例，取值范围 0~24， 默认24(占满一整行), 同理12则表示占据整行的50%

图表脚本 ​

可以单独设置某个图表的脚本语句(用法同主脚本), 也可以不填，为空时表示和主脚本一致。

Tip: 如果单独设置图表的脚本, 图表中脚本的参数要包含在主脚本的参数中。

eg:

主脚本Sql: "select * from table where id = @id and code like @code"

图表脚本Sql: "select code, name from tbl where id = @id and code like @code and name = @name"

则图表脚本中 @name 参数不会生效, 只能使用 @id 和 @code， 因为主脚本Sql中并没有使用@name，并且名称要保持一致。

图表json ​

支持多种方式

  1. 将数据部分使用 "@xxx" 来代替 (输入 @ 符号会自动提示)

eg:

  • 统一先处理变量数据，然后在配置中使用(推荐)
javascript
const x_data = "@MenuName"
const y_data = "@OrderSort"

return {
  xAxis: {
    type: 'category',
    data: x_data//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: y_data,//[1, 47, 2, 7, 32, 14, 16, 18, 20, 54],
      type: 'bar'
    }
  ]
};
const x_data = "@MenuName"
const y_data = "@OrderSort"

return {
  xAxis: {
    type: 'category',
    data: x_data//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: y_data,//[1, 47, 2, 7, 32, 14, 16, 18, 20, 54],
      type: 'bar'
    }
  ]
};

或者

  • 直接在配置中使用
javascript
return {
  xAxis: {
    type: 'category',
    data: "@MenuName"//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: "@OrderSort",//[1, 47, 2, 7, 32, 14, 16, 18, 20, 54],
      type: 'bar'
    }
  ]
};
return {
  xAxis: {
    type: 'category',
    data: "@MenuName"//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: "@OrderSort",//[1, 47, 2, 7, 32, 14, 16, 18, 20, 54],
      type: 'bar'
    }
  ]
};
  1. 异步动态获取数据

结构体:

javascript
 function(echarts,customHttp,message,set,customApiParams,customApiData){
    // echarts: ECharts组件实例
    // customHttp: 封装好的http请求,eg: customHttp({ url: 'xxx', method: 'GET', params: customApiParams, [data] })
    // message: UI组件的消息提示组件
    // set: 封装好的Object值更新方法
    // customApiParams: 当前报表的查询参数对象
    // customApiData: 数据类型为api时,返回的数据列表

    // 输入的图表json
    xxxx
 }
 function(echarts,customHttp,message,set,customApiParams,customApiData){
    // echarts: ECharts组件实例
    // customHttp: 封装好的http请求,eg: customHttp({ url: 'xxx', method: 'GET', params: customApiParams, [data] })
    // message: UI组件的消息提示组件
    // set: 封装好的Object值更新方法
    // customApiParams: 当前报表的查询参数对象
    // customApiData: 数据类型为api时,返回的数据列表

    // 输入的图表json
    xxxx
 }

eg:

javascript
const option = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    }
  ]
};
const url = '/api/DataDic/GetCateoryList'
const params = { key: '' }
const { data } = await customHttp({ url, method: 'GET', params })
option.xAxis.data = data?.map(x => x.code)
option.series[0].data = data?.map(x => x.id)
return option
const option = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    }
  ]
};
const url = '/api/DataDic/GetCateoryList'
const params = { key: '' }
const { data } = await customHttp({ url, method: 'GET', params })
option.xAxis.data = data?.map(x => x.code)
option.series[0].data = data?.map(x => x.id)
return option

图表Demo集

最终效果 ​