2020-11-18

king

2020-11-18 d3272e82652361e5e9bd045925222ef042b6731f

 src/tabviews/custom/components/chart/antv-bar-line/index.jsx

@@ -6,6 +6,7 @@
import { Spin, Empty, Select, notification } from 'antd'

import asyncComponent from './asyncButtonComponent'
import { chartColors } from '@/utils/option.js'
// import searchLine from '../../share/searchLine'
import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -30,6 +31,7 @@
    empty: true,               // 图表数据为空
    loading: false,            // 数据加载状态
    chartId: Utils.getuuid(),  // 图表Id
    transfield: {},            // 字段名称翻译
    title: '',                 // 组件标题
    sync: false,               // 是否统一请求数据
    plot: null,                // 图表设置
@@ -40,7 +42,6 @@
    chartData: [],             // 图表数据
    chartFields: [],           // 统计图表生成字段集
    selectFields: [],          // 统计图表选择字段
    percentFields: [],         // 设置为百分比的字段，tooltip时增加%
    showHeader: false          // 存在标题、搜索、或统计数据时显示
  }

@@ -60,7 +61,6 @@
    }

    let vFields = []
    let percentFields = []
    let vstFields = null

    if (_config.plot.datatype === 'statistics') {
@@ -93,10 +93,6 @@
            show: _config.plot.show,
            decimal
          })

          if (_config.plot.show === 'percent') {
            percentFields.push(col.label)
          }
        }
      })
    }
@@ -115,17 +111,91 @@
      _config.style = {minHeight: (config.plot.height || 400)}
    }

    let transfield = {}
    _config.columns.forEach(col => {
      if (col.field) {
        transfield[col.field] = col.label
      }
    })

    _config.plot.color = _config.plot.color || 'rgba(0, 0, 0, 0.85)'

    if (_config.plot.enabled === 'true' && _config.plot.customs && _config.plot.customs.length > 0) {
      let colors = new Map()
      let colorIndex = 0
      let limit = chartColors.length
  
      if (_config.plot.colors && _config.plot.colors.length > 0) {
        _config.plot.colors.forEach(item => {
          if (!colors.has(item.type)) {
            colors.set(item.type, item.color)
          }
        })
      }
  
      let axisIndex = 0
      let hasBar = false
      let fields = []
      let legends = []
  
      _config.plot.customs.forEach(item => {
        item.name = transfield[item.type] || item.type
        item.chartType = item.shape ? (item.shape[0] || 'bar') : 'bar'
        item.shape = item.shape ? (item.shape[1] || '') : ''
  
        if (colors.get(item.type)) {
          item.color = colors.get(item.type)
        } else {
          item.color = chartColors[colorIndex % limit]
          colorIndex++
        }
  
        if (item.chartType === 'bar' && !hasBar) {
          hasBar = true
        } else if (item.chartType === 'bar') {
          item.chartType = 'line'
          item.shape = 'smooth'
        }
  
        if (item.axis === 'true' && axisIndex < 2) {
          if (axisIndex === 0) {
            item.axis = { grid: {style: { fill: _config.plot.color }}, title: { style: { fill: _config.plot.color } }, label: {style: { fill: _config.plot.color }} }
            fields.unshift(item)
          } else {
            item.axis = { grid: null, title: {style: { fill: _config.plot.color }}, label: {style: { fill: _config.plot.color }} }
            fields.splice(1, 0, item)
          }
          axisIndex++
        } else {
          item.axis = { grid: null, title: null, label: null }
          fields.push(item)
        }
  
        
        legends.push({
          value: item.name,
          name: item.name,
          marker: { symbol: item.chartType === 'bar' ? 'square' : 'hyphen', style: { stroke: item.color,fill: item.color, r: 5, lineWidth: 2 } }
        })
      })
      _config.plot.customs = fields
      _config.plot.legends = legends
      _config.plot.hasBar = hasBar
    } else {
      _config.plot.enabled = 'false'
    }

    this.setState({
      config: _config,
      data: _data,
      vFields: vFields,
      vstFields: vstFields,
      percentFields: percentFields,
      arr_field: _config.columns.map(col => col.field).join(','),
      plot: _config.plot,
      sync: _sync,
      title: config.plot.title,
      search: Utils.initMainSearch(config.search),
      transfield,
      showHeader
    }, () => {
      if (config.setting.sync !== 'true' && config.setting.onload === 'true') {
@@ -134,13 +204,6 @@
        this.handleData()
      }
    })
  }

  /**
   * @description 校验图表的按钮组，如果为统计图表，计算图表字段
   */
  componentDidMount () {

  }

  /**
@@ -524,35 +587,42 @@
   * @description 折线图渲染
   */
  linerender = () => {
    const { plot, config, percentFields } = this.state
    const { plot, transfield } = this.state

    let _data = []
    let _valfield = 'value'
    let _typefield = 'key'
    let ispercent = false

    let colors = new Map()
    let colorIndex = 0

    if (plot.datatype === 'statistics') {
      _valfield = plot.InfoValue
      _typefield = plot.InfoType

      if (plot.show === 'percent') {
        ispercent = true
      if (plot.colors && plot.colors.length > 0) { // 颜色设置
        plot.colors.forEach(item => {
          if (!colors.has(item.type)) {
            colors.set(item.type, item.color)
          }
        })
      }

      _data = this.getStaticData()
    } else {
      let transfield = {}
      config.columns.forEach(col => {
        if (col.field) {
          transfield[col.field] = col.label
        }
      })
  
      let data = this.getdata()

      if (plot.enabled === 'true') {
        this.customrender(data, transfield)
        this.customrender(data)
        return
      }

      if (plot.colors && plot.colors.length > 0) { // 颜色设置
        plot.colors.forEach(item => {
          if (!colors.has(transfield[item.type])) {
            colors.set(transfield[item.type], item.color)
          }
        })
      }
  
      const ds = new DataSet()
@@ -596,7 +666,7 @@
      nice: true,
      range: [0, 0.93]
    })

    
    // 坐标轴格式化
    chart.axis(plot.Xaxis, {
      label: {
@@ -605,15 +675,19 @@
          let _val = `${val}`
          if (_val.length <= 11) return val
          return _val.substring(0, 8) + '...'
        }
      }
        },
        style: { fill: plot.color }
      },
      line: { style: { fill: plot.color } }
    })
    chart.axis(_valfield, { grid: { style: { fill: plot.color } }, label: { style: { fill: plot.color } } })

    if (!plot.legend || plot.legend === 'hidden') {
      chart.legend(false)
    } else {
      chart.legend({
        position: plot.legend
        position: plot.legend,
        itemName: { style: { fill: plot.color } }
      })
    }

@@ -639,20 +713,57 @@
    let _chart = chart
      .line()
      .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) || ispercent ? value + '%' : value
          value: plot.show === 'percent' ? value + '%' : value
        }
      })

    if (plot.colors && plot.colors.length > 0) {
      let limit = chartColors.length
      _chart.color(_typefield, (key) => {
        if (colors.get(key)) {
          return colors.get(key)
        } else {
          colors.set(key, chartColors[colorIndex % limit])
          colorIndex++
        }
      })
    } else {
      _chart.color(_typefield)
    }
    if (plot.label === 'true') {
      _chart.label(_valfield)
      _chart.label(_valfield, (value) => {
        if (plot.show === 'percent') {
          value = value + '%'
        }
        return {
          content: value,
          style: {
            fill: plot.color
          }
        }
      })
    }

    if (plot.point === 'true') {
    if (plot.point === 'true' && plot.colors && plot.colors.length > 0) {
      let limit = chartColors.length
      chart
        .point()
        .position(`${plot.Xaxis}*${_valfield}`)
        .color(_typefield, (key) => {
          if (colors.get(key)) {
            return colors.get(key)
          } else {
            colors.set(key, chartColors[colorIndex % limit])
            colorIndex++
          }
        })
        .size(3)
        .shape('circle')
    } else if (plot.point === 'true') {
      chart
        .point()
        .position(`${plot.Xaxis}*${_valfield}`)
@@ -667,46 +778,15 @@
  /**
   * @description 自定义渲染
   */
  customrender = (data, transfield) => {
    const { plot, percentFields } = this.state

    let barfields = []
    let fields = []
    let legends = []

    plot.customs.forEach(item => {
      item.name = transfield[item.field] || item.field
      if (item.axis === 'left') {
        item.index = 0
      } else if (item.axis === 'right') {
        item.index = 1
      } else {
        item.index = 2
      }

      if (item.chartType === 'bar') {
        barfields.push(item.field)
        fields.unshift(item)
      } else {
        fields.push(item)
      }

      legends.push({
        value: item.name,
        name: item.name,
        marker: { symbol: item.chartType === 'bar' ? 'square' : 'hyphen', style: { stroke: item.color,fill: item.color, r: 5, lineWidth: 2 } }
      })
    })

    fields.sort((a, b) => a.index - b.index)

  customrender = (data) => {
    const { plot } = this.state
    const ds = new DataSet()
    const dv = ds.createView().source(data)
    dv.transform({
      type: 'map',
      callback(row) {
        fields.forEach(line => {
          row[line.name] = row[line.field]
        plot.customs.forEach(line => {
          row[line.name] = row[line.type]
        })
        return row
      }
@@ -718,15 +798,24 @@
      height: plot.height || 400
    })

    chart.data(dv.rows)
    let _data = dv.rows
    // dodge is not support linear attribute, please use category attribute! 时间格式
    if (_data[0] && _data[0][plot.Xaxis] && /^\d{4}-\d{2}-\d{2}(\s\d{2}:\d{2}:\d{2})?/.test(_data[0][plot.Xaxis])) {
      for (let i = 1; i < 12; i++) {
        if (_data[i] && _data[i][plot.Xaxis] === _data[0][plot.Xaxis]) {
          _data[i][plot.Xaxis] += ' '
        } else {
          break;
        }
      }
      _data[0][plot.Xaxis] += ' '
    }

    if (plot.coordinate !== 'polar' && barfields.length === 0) {
    chart.data(_data)

    if (!plot.hasBar) {
      chart.scale(plot.Xaxis, {
        range: [0, 1]
      })
    } else {
      chart.scale(plot.Xaxis, {
        range: [0.05, 0.95]
      })
    }
    
@@ -738,8 +827,10 @@
          let _val = `${val}`
          if (_val.length <= 11) return val
          return _val.substring(0, 8) + '...'
        }
      }
        },
        style: { fill: plot.color }
      },
      line: { style: { fill: plot.color } }
    })

    if (!plot.legend || plot.legend === 'hidden') {
@@ -748,7 +839,8 @@
      chart.legend({
        custom: true,
        position: plot.legend,
        items: legends,
        items: plot.legends,
        itemName: { style: { fill: plot.color } }
      })
    }

@@ -760,37 +852,13 @@
      })
    }

    if (plot.transpose === 'true') {
      chart.coordinate().transpose()
    }

    if (plot.coordinate === 'polar') {
      chart.coordinate('polar', {
        innerRadius: 0.1,
        radius: 0.8
    plot.customs.forEach((item, i) => {
      chart.axis(item.name, item.axis)
      
      chart.scale(item.name, {
        nice: true,
        range: [0, 0.93]
      })
    }

    fields.forEach((item, i) => {
      if (i === 0) {
        chart.axis(item.name, {
          grid: {},
          title: {},
          label: {}
        })
      } else if (i === 1 && item.axis !== 'unset') {
        chart.axis(item.name, {
          grid: null,
          title: {},
          label: {}
        })
      } else {
        chart.axis(item.name, {
          grid: null,
          title: null,
          label: null
        })
      }

      if (item.chartType === 'bar') {
        let _chart = chart
@@ -801,12 +869,25 @@
          .tooltip(`${item.name}`, (value) => {
            return {
              name: item.name,
              value: percentFields.includes(item.name) ? value + '%' : value
              value: plot.show === 'percent' ? value + '%' : value
            }
          })

        if (plot.barSize) {
          _chart.size(plot.barSize || 35)
        }
        if (item.label === 'true') {
          _chart.label(item.name)
          _chart.label(item.name, (value) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              content: value,
              style: {
                fill: plot.color
              }
            }
          })
        }
      } else if (item.chartType === 'line') {
        let _chart = chart
@@ -817,12 +898,22 @@
          .tooltip(`${item.name}`, (value) => {
            return {
              name: item.name,
              value: percentFields.includes(item.name) ? value + '%' : value
              value: plot.show === 'percent' ? value + '%' : value
            }
          })

        if (item.label === 'true') {
          _chart.label(item.name)
          _chart.label(item.name, (value) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              content: value,
              style: {
                fill: plot.color
              }
            }
          })
        }

        if (plot.point === 'true') {
@@ -843,35 +934,42 @@
   * @description 柱状图渲染
   */
  barrender = () => {
    const { plot, config, percentFields } = this.state
    const { plot, transfield } = this.state

    let _data = []
    let _valfield = 'value'
    let _typefield = 'key'
    let ispercent = false

    let colors = new Map()
    let colorIndex = 0

    if (plot.datatype === 'statistics') {
      _valfield = plot.InfoValue
      _typefield = plot.InfoType

      if (plot.show === 'percent') {
        ispercent = true
      if (plot.colors && plot.colors.length > 0) { // 颜色设置
        plot.colors.forEach(item => {
          if (!colors.has(item.type)) {
            colors.set(item.type, item.color)
          }
        })
      }

      _data = this.getStaticData()
    } else {
      let transfield = {}
      config.columns.forEach(col => {
        if (col.field) {
          transfield[col.field] = col.label
        }
      })

      let data = this.getdata()

      if (plot.enabled === 'true') {
        this.customrender(data, transfield)
        this.customrender(data)
        return
      }

      if (plot.colors && plot.colors.length > 0) { // 颜色设置
        plot.colors.forEach(item => {
          if (!colors.has(transfield[item.type])) {
            colors.set(transfield[item.type], item.color)
          }
        })
      }

      const ds = new DataSet()
@@ -930,15 +1028,19 @@
          let _val = `${val}`
          if (_val.length <= 11) return val
          return _val.substring(0, 8) + '...'
        }
      }
        },
        style: { fill: plot.color }
      },
      line: { style: { fill: plot.color } }
    })
    chart.axis(_valfield, { grid: { style: { fill: plot.color } }, label: { style: { fill: plot.color } } })

    if (!plot.legend || plot.legend === 'hidden') {
      chart.legend(false)
    } else {
      chart.legend({
        position: plot.legend
        position: plot.legend,
        itemName: { style: { fill: plot.color } }
      })
    }

@@ -966,7 +1068,6 @@
      let _chart = chart
        .interval()
        .position(`${plot.Xaxis}*${_valfield}`)
        .color(_typefield)
        .adjust([
          {
            type: 'dodge',
@@ -977,12 +1078,35 @@
        .tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
          return {
            name: type,
            value: percentFields.includes(type) || ispercent ? value + '%' : value
            value: plot.show === 'percent' ? value + '%' : value
          }
        })

      if (plot.colors && plot.colors.length > 0) {
        let limit = chartColors.length
        _chart.color(_typefield, (key) => {
          if (colors.get(key)) {
            return colors.get(key)
          } else {
            colors.set(key, chartColors[colorIndex % limit])
            colorIndex++
          }
        })
      } else {
        _chart.color(_typefield)
      }
      if (plot.label === 'true') {
        _chart.label(_valfield)
        _chart.label(_valfield, (value) => {
          if (plot.show === 'percent') {
            value = value + '%'
          }
          return {
            content: value,
            style: {
              fill: plot.color
            }
          }
        })
      }

      if (plot.barSize || plot.correction) {
@@ -992,18 +1116,40 @@
      let _chart = chart
        .interval()
        .position(`${plot.Xaxis}*${_valfield}`)
        .color(_typefield)
        .adjust('stack')
        .shape(plot.shape || 'rect')
        .tooltip(`${plot.Xaxis}*${_valfield}*${_typefield}`, (name, value, type) => {
          return {
            name: type,
            value: percentFields.includes(type) || ispercent ? value + '%' : value
            value: plot.show === 'percent' ? value + '%' : value
          }
        })

      if (plot.colors && plot.colors.length > 0) {
        let limit = chartColors.length
        _chart.color(_typefield, (key) => {
          if (colors.get(key)) {
            return colors.get(key)
          } else {
            colors.set(key, chartColors[colorIndex % limit])
            colorIndex++
          }
        })
      } else {
        _chart.color(_typefield)
      }
      if (plot.label === 'true') {
        _chart.label(_valfield)
        _chart.label(_valfield, (value) => {
          if (plot.show === 'percent') {
            value = value + '%'
          }
          return {
            content: value,
            style: {
              fill: plot.color
            }
          }
        })
      }

      if (plot.barSize || plot.correction) {