图表组件

数据图表展示模式,配置位置为wau_body.chart或者wau_body.body.chart
目前支持的图表类型有:折线图、饼图、柱状图、象形柱图、地图

  • 在使用图表组件时需要引入配置文件,如下所示
  • 新增自动刷新数据 2018-03-12
wau_config:
  plugins:
    - 'Echarts'

【折线图】效果预览

结构配置

  chart:
    - model: chart
      id: chart1
      type: line
      style: {height: '500px'}
      auto_refresh: 2000 #自动刷新配置,此处为2s
      request: 
        model: ajax
        url: '/platform/chart/get_line'
        method: 'POST'
        params: {uid: '{%absc.id%}',qq: '{%user.qq%}'}
      search_bar:
        # 见search_bar组件
        buttons: 
          - model: btn
            type: 'searchbar.reload'
            content: '刷新'
          - model: btn
            type: 'searchbar.search'
            class_name: 'btn-white'
            content: '查询'
            icon: 'fa-search icon-on-right bigger-110'
          - model: btn
            type: 'searchbar.clear'
            class_name: 'btn-white'
            content: '清空'
      option: # option配置见echarts官方文档
        title: 
          text: '用户增减趋势'
        tooltip:
          trigger: 'axis'
        legend:
          data: 
            - 累计访问用户数
        xAxis:
          data: []
        yAxis:
          type: 'value'
        series:
          name: '邮件营销'
          type: 'line'
          stack: '总量'
          data: []

折线图返回值结构示例

返回值将会合并到option中,所以可以参考Echarts官方文档

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "xAxis": {
          "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        "series": {
          "data": [10, 52, 200, 334, 390, 330, 220]
        }
    }
}

字段说明

chart通用字段

字段 类型 含义 默认值
model String 表示为图表类型, chart -
id String 图表唯一标识id -
class_name String 图表class名 -
type String 图表类型,包含 line, pie, bar, pictorialBar, map -
style String 配置图表宽高 -
request Object 图表请求配置 -
search_bar Object 图表检索配置,见检索组件 -
option Object 图表配置项,见Echarts官方文档 -
auto_refresh Number 自动刷新数据配置,单位ms -

【饼图】效果预览

结构配置

  - model: chart
    id: chart2
    type: pie
    class_name: 'wii-chart-table'
    style: {height: '400px'}
    request: 
      model: ajax
      url: '/platform/chart/get_pie2'
      method: 'POST'
      params: {uid: '{%id%}',qq: '{%qq%}'}
    option:
      title: 
        text: '运营商'
        subtext: '江苏省公安管理系统'
      tooltip:
        trigger: 'item'
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      legend:
        data: []
      series:
        - name: '访问来源'
          total: 76510
          data: []

饼图返回值结构示例

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "legend": {
            "data": ["苹果", "三星", "华为", "OPPO", "VIVO", "其它"]
        },
        "series": [{
            "data": [{
                "value": 12145,
                "name": "苹果"
            }, {
                "value": 48489,
                "name": "三星"
            }, {
                "value": 25615,
                "name": "华为"
            }, {
                "value": 15151,
                "name": "OPPO"
            }, {
                "value": 23156,
                "name": "VIVO"
            }, {
                "value": 154189,
                "name": "其它"
            }]
        }]
    }
}

【柱状图】效果预览

结构配置

  - model: chart
    id: chart5
    type: bar
    style: {height: '600px'}
    request: 
      model: ajax
      url: '/platform/chart/get_bar'
      method: 'POST'
      params: {uid: '{%id%}',qq: '{%qq%}'}
    option:
      title: 
        text: '年龄分布'
        subtext: '江苏省公安管理系统'
      xAxis:
        data: []
      yAxis:
        - type: 'value'
      series:
        - name: 直接访问
          total: 76510
          data: []

柱状图返回值结构示例

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "title": {
            "text": "异步修改标题"
        },
        "xAxis": {
            "data": ["1-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "80以上"]
        },
        "series": [{
            "name": "直接访问",
            "type": "bar",
            "barWidth": "60%",
            "data": [10, 52, 200, 334, 390, 330, 220, 50, 10]
        }]
    }
}

【象形柱图】效果预览

结构配置

  - model: chart
    id: chart6
    type: pictorialBar
    style: {height: '450px'}
    request: 
      model: ajax
      url: '/platform/chart/get_pictorialBar'
      method: 'POST'
      params: {uid: '{%id%}',qq: '{%qq%}'}
    option:
      xAxis:
        max: 2000
      yAxis:
        axisLine: {show: false}
        axisTick: {show: false}
        data:
          -          -      grid: 
        width: '50%'
        left: 'center'
        height: '300'
      series:
        - type: pictorialBar
          symbolBoundingData: 2000
          symbolRepeat: 10
          symbolSize: ['30','60']
          data: []
        - type: pictorialBar
          symbolBoundingData: 2000
          symbolRepeat: 10
          symbolSize: ['30','60']
          data: []

象形柱图返回值结构示例

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "series": [{
            "data": [{
                "value": 200
            }, {
                "value": 1800
            }]
        }, {
            "data": [{
                "value": 200
            }, {
                "value": 1800
            }]
        }]
    }
}

【地图】效果预览

结构配置

  - model: chart
    id: chart7
    type: map
    style: {height: '600px'}
    geo_request: # 地图数据配置,此处url配置的json返回格式为echarts文档提供的返回格式,此处以江苏为例
      city_name: JIANGSU
      model: ajax
      url: '/platform/chart/jiangsu'
      method: 'POST'
      params: {cid: '{%qq%}'}
    request: 
      model: ajax
      url: '/platform/chart/get_list'
      method: 'POST'
      params: {uid: '{%id%}',qq: '{%qq%}'}
    class_name: 'wii-chart-table'
    data_table:
      header:
        content:
          - {model: text, content: 城市}
          - {model: text, content: 用户数}
          - {model: text, content: 占比}
    option: 
      title:
        text: 江苏省各市人口密度 (2017        subtext: 江苏省公安管理系统
        sublink: http://www.qq.com
      tooltip:
        trigger: item
        formatter: "{b}<br/>{c} (p / km2)"
      visualMap:
        min: 800
        max: 50000
      series:
      - name: 江苏省各市人口密度(2017)
        type: map
        mapType: JIANGSU
        data: []

地图返回值结构示例(/platform/chart/get_list)

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "series": [{
            "total": 838787,
            "data": [{
                "name": "南通市",
                "value": 20057.34
            }, {
                "name": "南京市",
                "value": 15477.48
            }, {
                "name": "无锡市",
                "value": 31686.1
            }, {
                "name": "苏州市",
                "value": 6992.6
            }, {
                "name": "徐州市",
                "value": 44045.49
            }, {
                "name": "常州市",
                "value": 40689.64
            }, {
                "name": "扬州市",
                "value": 37659.78
            }, {
                "name": "镇江市",
                "value": 45180.97
            }, {
                "name": "盐城市",
                "value": 55204.26
            }, {
                "name": "泰州市",
                "value": 21900.9
            }, {
                "name": "淮安市",
                "value": 4918.26
            }, {
                "name": "连云港市",
                "value": 5881.84
            }, {
                "name": "宿迁市",
                "value": 4178.01
            }]
        }]
    }
}

jiangsu返回值结构示例(/platform/chart/jiangsu)

地图json数据见Echarts官方文档

{
    "ret": 0,
    "msg": "OK",
    "errorcode": 0,
    "data": {
        "type": "FeatureCollection",
        "features": [...],
        "UTF8Encoding": true
    }

}

results matching ""

    No results matching ""