2020-05-26

king

2020-05-26 a2df1bad33874fc6d9f96b0ceb1a6ce97b2e7e80

 src/templates/sharecomponent/chartcomponent/index.jsx

@@ -84,33 +84,146 @@
        transfield[col.field] = col.label
      }
    })
    // const colors = ['#f49d37', '#f03838', '#35d1d1', '#5be56b', '#4e7af0', '#ebcc21']

    let X_axis = plot.Xaxis || 'x'
    let Y_axis = plot.Yaxis || ['y']

    let data = this.getdata(X_axis, Y_axis)

    const ds = new DataSet()
    const dv = ds.createView().source(data)
    if (plot.enabled !== 'true') {
      const ds = new DataSet()
      const dv = ds.createView().source(data)

    dv.transform({
      type: 'fold',
      fields: [...Y_axis],
      key: 'key', // key字段
      value: 'value', // value字段
      // retains: [], // 保留字段集，默认为除 fields 以外的所有字段
      dv.transform({
        type: 'fold',
        fields: [...Y_axis],
        key: 'key',
        value: 'value'
      })

      if (plot.Xaxis) {
        dv.transform({
          type: 'map',
          callback(row) {
            row.key = transfield[row.key]
            return row
          },
        })
      }

      const chart = new Chart({
        container: plot.uuid,
        autoFit: true,
        height: plot.height || 400
      })
  
      chart.data(dv.rows)
  
      if (plot.coordinate !== 'polar') {
        chart.scale(X_axis, {
          range: [0, 1]
        })
      }
      chart.scale('value', {
        nice: true
      })
  
      if (!plot.legend || plot.legend === 'hidden') {
        chart.legend(false)
      } else {
        chart.legend({
          position: plot.legend
        })
      }
  
      if (plot.tooltip !== 'true') {
        chart.tooltip(false)
      } else {
        chart.tooltip({
          shared: true
        })
      }
  
      if (plot.transpose === 'true') {
        chart.coordinate().transpose()
      }
  
      if (plot.coordinate === 'polar') {
        chart.coordinate('polar', {
          innerRadius: 0.1,
          radius: 0.8
        })
      }
  
      let _chart = chart
        .line()
        .position(`${X_axis}*value`)
        .color('key')
        .shape(plot.shape || 'smooth')
  
      if (plot.label === 'true') {
        _chart.label('value')
      }

      if (plot.point === 'true') {
        chart
          .point()
          .position(`${X_axis}*value`)
          .color('key')
          .size(3)
          .shape('circle')
      }
      chart.render()
    } else {
      this.customrender(data, transfield)
    }
  }

  customrender = (data, transfield) => {
    const { plot } = this.props

    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 } }
      })
    })

    if (plot.Xaxis) {
      dv.transform({
        type: 'map',
        callback(row) {
          row.key = transfield[row.key]
          return row
        },
      })
    }
    
    fields.sort((a, b) => a.index - b.index)

    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]
        })
        return row
      }
    })

    const chart = new Chart({
      container: plot.uuid,
      autoFit: true,
@@ -119,20 +232,19 @@

    chart.data(dv.rows)

    if (plot.coordinate !== 'polar') {
      chart.scale(X_axis, {
    if (plot.coordinate !== 'polar' && barfields.length === 0) {
      chart.scale(plot.Xaxis, {
        range: [0, 1]
      })
    }
    chart.scale('value', {
      nice: true
    })

    if (!plot.legend || plot.legend === 'hidden') {
      chart.legend(false)
    } else {
      chart.legend({
        position: plot.legend
        custom: true,
        position: plot.legend,
        items: legends,
      })
    }

@@ -155,27 +267,63 @@
      })
    }

    let _chart = chart
      .line()
      .position(`${X_axis}*value`)
      .color('key')
      .shape(plot.shape || 'smooth')
    chart.scale({
      nice: true
    })

    if (plot.label === 'true') {
      _chart.label('value')
    }
    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
          .interval()
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)

    if (plot.point === 'true') {
      chart
        .point()
        .position(`${X_axis}*value`)
        .color('key')
        .size(3)
        .shape('circle')
    }
    
    // chart.interaction('element-active') 
    // chart.removeInteraction('legend-filter') // 自定义图例，移除默认的分类图例筛选交互
        if (item.label === 'true') {
          _chart.label(item.name)
        }
      } else if (item.chartType === 'line') {
        let _chart = chart
          .line()
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
          .shape(item.shape)

        if (item.label === 'true') {
          _chart.label(item.name)
        }

        if (plot.point === 'true') {
          chart
            .point()
            .position(`${plot.Xaxis}*${item.name}`)
            .color(item.color)
            .size(3)
            .shape('circle')
        }
      }
    })

    chart.render()
  }

@@ -195,88 +343,100 @@
    }

    let data = this.getdata(X_axis, Y_axis)

    const ds = new DataSet()
    const dv = ds.createView().source(data)

    dv.transform({
      type: 'fold',
      fields: [...Y_axis],
      key: 'key',
      value: 'value'
    })

    if (plot.Xaxis) {
      dv.transform({
        type: 'map',
        callback(row) {
          row.key = transfield[row.key]
          return row
        },
      })
    }
    
    const chart = new Chart({
      container: plot.uuid,
      autoFit: true,
      height: plot.height || 400
    })

    chart.data(dv.rows)

    chart.scale('value', {
      nice: true
    })

    if (!plot.legend || plot.legend === 'hidden') {
      chart.legend(false)
    if (plot.enabled !== 'true') {
      const ds = new DataSet()
      const dv = ds.createView().source(data)
  
      dv.transform({
        type: 'fold',
        fields: [...Y_axis],
        key: 'key',
        value: 'value'
      })
  
      if (plot.Xaxis) {
        dv.transform({
          type: 'map',
          callback(row) {
            row.key = transfield[row.key]
            return row
          },
        })
      }
      
      const chart = new Chart({
        container: plot.uuid,
        autoFit: true,
        height: plot.height || 400
      })
  
      chart.data(dv.rows)
  
      chart.scale('value', {
        nice: true
      })
  
      if (!plot.legend || plot.legend === 'hidden') {
        chart.legend(false)
      } else {
        chart.legend({
          position: plot.legend
        })
      }
  
      if (plot.tooltip !== 'true') {
        chart.tooltip(false)
      } else {
        chart.tooltip({
          shared: true
        })
      }
  
      if (plot.transpose === 'true') {
        chart.coordinate().transpose()
      }
  
      if (plot.coordinate === 'polar') {
        chart.coordinate('polar', {
          innerRadius: 0.1,
          radius: 0.8
        })
      }
  
      if (plot.adjust !== 'stack') {
        let _chart = chart
          .interval()
          .position(`${X_axis}*value`)
          .color('key')
          .adjust([
            {
              type: 'dodge',
              marginRatio: 0
            }
          ])
          .shape(plot.shape || 'rect')
  
        if (plot.label === 'true') {
          _chart.label('value')
        }
      } else if (plot.adjust === 'stack') {
        let _chart = chart
          .interval()
          .position(`${X_axis}*value`)
          .color('key')
          .adjust('stack')
          .shape(plot.shape || 'rect')
  
        if (plot.label === 'true') {
          _chart.label('value')
        }
      }
  
      chart.render()
    } else {
      chart.legend({
        position: plot.legend
      })
      this.customrender(data, transfield)
    }

    if (plot.tooltip !== 'true') {
      chart.tooltip(false)
    } else {
      chart.tooltip({
        shared: true
      })
    }

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

    if (plot.coordinate === 'polar') {
      chart.coordinate('polar', {
        innerRadius: 0.1,
        radius: 0.8
      })
    }

    if (plot.adjust !== 'stack') {
      chart
        .interval()
        .position(`${X_axis}*value`)
        .color('key')
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0
          }
        ])
        .shape(plot.shape || 'rect')
    } else if (plot.adjust === 'stack') {
      chart
        .interval()
        .position(`${X_axis}*value`)
        .color('key')
        .adjust('stack')
        .shape(plot.shape || 'rect')
    }

    chart.render()
  }

  pierender = () => {
@@ -416,9 +576,13 @@
    chart.render()
  }

  plotChange = (values) => {
    const { plot, config } = this.props
    let _plot = {...plot, ...values}
  plotChange = (_plot) => {
    const { config } = this.props

    if (_plot.datatype === 'statistics') {
      _plot.Yaxis = [_plot.InfoValue]
    }
    
    let _charts = fromJS(config.charts).toJS()

    _charts = _charts.map(item => {
@@ -442,7 +606,7 @@

    return (
      <div className="line-chart-edit-box" style={{minHeight: plot.height ? plot.height + 50 : 450}}>
        <p className="chart-title">{plot.title}</p>
        {plot.title ? <p className="chart-title">{plot.title}</p> : null}
        <div className="canvas" id={plot.uuid}></div>
        <ChartCompileForm
          plot={plot}