2020-07-31

king

2020-07-31 5ae8e447c55f61508546e00559f54eb623a5c803

 src/tabviews/zshare/chartcomponent/index.jsx

@@ -7,8 +7,8 @@

import asyncComponent from './asyncButtonComponent'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import './index.scss'

const ExcelOutButton = asyncComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
@@ -16,29 +16,35 @@

class LineChart extends Component {
  static propTpyes = {
    BID: PropTypes.any,
    Tab: PropTypes.any,
    plot: PropTypes.object,
    data: PropTypes.array,
    loading: PropTypes.bool,
    config: PropTypes.object,
    getexceloutparam: PropTypes.func
    BID: PropTypes.any,              // 父级Id
    Tab: PropTypes.any,              // 标签信息
    plot: PropTypes.object,          // 图标设置信息
    data: PropTypes.array,           // 图表传入数据
    loading: PropTypes.bool,         // 数据加载中
    config: PropTypes.object,        // 页面配置信息
    getexceloutparam: PropTypes.func // 获取excel导出参数
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    empty: true,
    actions: [],
    chartId: Utils.getuuid(),
    chartData: [],
    chartFields: [],
    selectFields: []
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 字典
    empty: true,               // 图表数据为空
    actions: [],               // 图表绑定的按钮组
    chartId: Utils.getuuid(),  // 图表Id
    chartData: [],             // 图表数据
    chartFields: [],           // 统计图表生成字段集
    selectFields: [],          // 统计图表选择字段
    percentFields: []          // 设置为百分比的字段，tooltip时增加%
  }

  /**
   * @description 校验图表的按钮组，如果为统计图表，计算图表字段
   */
  componentDidMount () {
    const { plot, data, config } = this.props
    let _state = {}
    let actions = []
    let percentFields = []

    config.action.forEach(item => {
      if (!plot.actions || plot.actions.length === 0) return
      if (!(item.OpenType === 'excelOut' || (item.OpenType === 'excelIn' && item.Ot === 'notRequired'))) return
@@ -54,15 +60,38 @@
      _state.selectFields = result.selectFields
      _state.actions = actions

      let _column = config.columns.filter(col => plot.InfoValue === col.field)[0]

      if (_column && _column.format === 'percent') {
        percentFields.push(plot.InfoValue)
        _state.percentFields = percentFields
      }

      this.setState(_state, () => {
        this.viewrender()
      })
    } else {
      this.setState({ actions })
      this.viewrender()
      if (plot.chartType === 'line' || plot.chartType === 'bar') {
        try {
          plot.Yaxis.forEach(yaxis => {
            let _column = config.columns.filter(col => yaxis === col.field)[0]
            if (_column && _column.format === 'percent') {
              percentFields.push(_column.label)
            }
          })
        } catch {
          console.warn('Incorrect percentage setting')
        }
      }
      this.setState({ actions, percentFields }, () => {
        this.viewrender()
      })
    }
  }

  /**
   * @description 图表数据更新，刷新内容
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { plot } = this.props
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
@@ -89,6 +118,12 @@
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 图表数据预处理
   * 1、通过显示列进行数据类型转换
   * 2、重复数据：取平均值、累计、去重
   * 3、柱状图数据补齐
   */
  getdata = () => {
    const { data, plot, config } = this.props
    let vFields = plot.Yaxis && typeof(plot.Yaxis) === 'string' ? [plot.Yaxis] : plot.Yaxis
@@ -217,6 +252,9 @@
    return _data
  }

  /**
   * @description 统计数据预处理，动态生成统计字段并进行数据转换
   */
  getStaticMsg = (data) => {
    const { plot, config } = this.props

@@ -248,7 +286,7 @@

        item.$uuid = item[plot.InfoType] + item[plot.Xaxis]
        if (typeof(item[plot.InfoValue]) !== 'number') {
          item[plot.InfoValue] = parseFloat(plot.InfoValue)
          item[plot.InfoValue] = parseFloat(item[plot.InfoValue])
          if (isNaN(item[plot.InfoValue])) {
            item[plot.InfoValue] = 0
          }
@@ -285,7 +323,7 @@
        item.$uuid = item[plot.InfoType] + item[plot.Xaxis]

        if (typeof(item[plot.InfoValue]) !== 'number') {
          item[plot.InfoValue] = parseFloat(plot.InfoValue)
          item[plot.InfoValue] = parseFloat(item[plot.InfoValue])
          if (isNaN(item[plot.InfoValue])) {
            item[plot.InfoValue] = 0
          }
@@ -320,7 +358,7 @@

        if (!_mdata.has(item.$uuid)) {
          if (typeof(item[plot.InfoValue]) !== 'number') {
            item[plot.InfoValue] = parseFloat(plot.InfoValue)
            item[plot.InfoValue] = parseFloat(item[plot.InfoValue])
            if (isNaN(item[plot.InfoValue])) {
              item[plot.InfoValue] = 0
            }
@@ -350,6 +388,9 @@
    return {data: _data, chartFields: _chartFields, selectFields: _selectFields}
  }

  /**
   * @description 获取统计图表展示数据，通过选择类型筛选
   */
  getStaticData = () => {
    const { plot } = this.props
    const { chartData, chartFields, selectFields } = this.state
@@ -365,6 +406,9 @@
    return _data
  }

  /**
   * @description 图表渲染分组
   */
  viewrender = () => {
    const { plot } = this.props

@@ -377,8 +421,12 @@
    }
  }

  /**
   * @description 折线图渲染
   */
  linerender = () => {
    const { plot, config } = this.props
    const { percentFields } = this.state

    let _data = []
    let _valfield = 'value'
@@ -489,6 +537,12 @@
      .position(`${plot.Xaxis}*${_valfield}`)
      .color(_typefield)
      .shape(plot.shape || 'smooth')
      .tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
        return {
          name: type,
          value: percentFields.includes(type) ? value + '%' : value
        }
      })

    if (plot.label === 'true') {
      _chart.label(_valfield)
@@ -506,8 +560,12 @@
    chart.render()
  }

  /**
   * @description 自定义渲染
   */
  customrender = (data, transfield) => {
    const { plot } = this.props
    const { percentFields } = this.state

    let barfields = []
    let fields = []
@@ -630,13 +688,19 @@
          label: null
        })
      }
      

      if (item.chartType === 'bar') {
        let _chart = chart
          .interval()
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)
          .tooltip(`${item.name}`, (value) => {
            return {
              name: item.name,
              value: percentFields.includes(item.name) ? value + '%' : value
            }
          })

        if (item.label === 'true') {
          _chart.label(item.name)
@@ -647,6 +711,12 @@
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)
          .tooltip(`${item.name}`, (value) => {
            return {
              name: item.name,
              value: percentFields.includes(item.name) ? value + '%' : value
            }
          })

        if (item.label === 'true') {
          _chart.label(item.name)
@@ -666,8 +736,12 @@
    chart.render()
  }

  /**
   * @description 柱状图渲染
   */
  barrender = () => {
    const { plot, config } = this.props
    const { percentFields } = this.state

    let _data = []
    let _valfield = 'value'
@@ -785,6 +859,12 @@
          }
        ])
        .shape(plot.shape || 'rect')
        .tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
          return {
            name: type,
            value: percentFields.includes(type) ? value + '%' : value
          }
        })

      if (plot.label === 'true') {
        _chart.label(_valfield)
@@ -796,6 +876,12 @@
        .color(_typefield)
        .adjust('stack')
        .shape(plot.shape || 'rect')
        .tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
          return {
            name: type,
            value: percentFields.includes(type) ? value + '%' : value
          }
        })

      if (plot.label === 'true') {
        _chart.label(_valfield)
@@ -805,6 +891,9 @@
    chart.render()
  }

  /**
   * @description 饼图渲染
   */
  pierender = () => {
    const { plot, config } = this.props

@@ -953,6 +1042,9 @@
    chart.render()
  }

  /**
   * @description 统计图表，统计类型切换
   */
  handleChange = (val) => {
    this.setState({selectFields: val}, () => {
      let _element = document.getElementById(this.state.chartId)