2020-10-23

king

2020-10-23 407c0f1765c7d085218a91ad8842784977383d05

 src/menu/components/chart/antv-bar/index.jsx

@@ -84,7 +84,11 @@
        name: _plot.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        style: {
          fontSize: '16px',
          borderWidth: '1px', borderColor: 'rgb(217, 217, 217)',
          marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
        },
        columns: [],
        scripts: [],
        search: [],
@@ -105,6 +109,7 @@
  componentDidMount () {
    this.viewrender()
    MKEmitter.addListener('tabsChange', this.handleTabsChange)
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -119,6 +124,7 @@
      return
    }
    MKEmitter.removeListener('tabsChange', this.handleTabsChange)
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  handleTabsChange = (parentId) => {
@@ -170,7 +176,8 @@

  linerender = () => {
    const { card } = this.state
    let plot = {...card.plot, height: card.plot.height - 70} // 去除title所占空间
    let plot = {...card.plot, height: card.plot.height - 80} // 去除title所占空间
    let color = plot.color || 'rgba(0, 0, 0, 0.85)'

    let transfield = {}
    card.columns.forEach(col => {
@@ -212,6 +219,31 @@
      })
  
      chart.data(dv.rows)

      chart.axis(X_axis, {
        label: {
          style: {
            fill: color,
          }
        },
        line: {
          style: {
            fill: color,
          }
        }
      })
      chart.axis('value', {
        grid: {
          style: {
            fill: color,
          }
        },
        label: {
          style: {
            fill: color,
          }
        }
      })
  
      if (plot.coordinate !== 'polar') {
        chart.scale(X_axis, {
@@ -226,7 +258,12 @@
        chart.legend(false)
      } else {
        chart.legend({
          position: plot.legend
          position: plot.legend,
          itemName: {
            style: {
              fill: color,
            }
          }
        })
      }
  
@@ -275,7 +312,8 @@

  customrender = (data, transfield) => {
    const { card } = this.state
    let plot = {...card.plot, height: card.plot.height - 70} // 去除title所占空间
    let plot = {...card.plot, height: card.plot.height - 80} // 去除title所占空间
    let color = plot.color || 'rgba(0, 0, 0, 0.85)'

    let barfields = []
    let fields = []
@@ -327,6 +365,31 @@

    chart.data(dv.rows)

    chart.axis(plot.Xaxis, {
      label: {
        style: {
          fill: color,
        }
      },
      line: {
        style: {
          fill: color,
        }
      }
    })
    chart.axis('value', {
      grid: {
        style: {
          fill: color,
        }
      },
      label: {
        style: {
          fill: color,
        }
      }
    })

    if (plot.coordinate !== 'polar' && barfields.length === 0) {
      chart.scale(plot.Xaxis, {
        range: [0, 1]
@@ -340,6 +403,11 @@
        custom: true,
        position: plot.legend,
        items: legends,
        itemName: {
          style: {
            fill: color,
          }
        }
      })
    }

@@ -347,7 +415,7 @@
      chart.tooltip(false)
    } else {
      chart.tooltip({
        shared: true
        shared: true,
      })
    }

@@ -424,7 +492,8 @@

  barrender = () => {
    const { card } = this.state
    let plot = {...card.plot, height: card.plot.height - 70}
    let plot = {...card.plot, height: card.plot.height - 80}
    let color = plot.color || 'rgba(0, 0, 0, 0.85)'

    let transfield = {}
    card.columns.forEach(col => {
@@ -466,30 +535,30 @@
  
      chart.data(dv.rows)

      // chart.axis(X_axis, {
      //   label: {
      //     style: {
      //       fill: '#ffffff',
      //     }
      //   },
      //   line: {
      //     style: {
      //       fill: '#ffffff',
      //     }
      //   }
      // })
      // chart.axis('value', {
      //   grid: {
      //     style: {
      //       fill: '#ffffff',
      //     }
      //   },
      //   label: {
      //     style: {
      //       fill: '#ffffff',
      //     }
      //   }
      // })
      chart.axis(X_axis, {
        label: {
          style: {
            fill: color,
          }
        },
        line: {
          style: {
            fill: color,
          }
        }
      })
      chart.axis('value', {
        grid: {
          style: {
            fill: color,
          }
        },
        label: {
          style: {
            fill: color,
          }
        }
      })
  
      chart.scale('value', {
        nice: true
@@ -500,11 +569,11 @@
      } else {
        chart.legend({
          position: plot.legend,
          // itemName: {
          //   style: {
          //     fill: '#ffffff',
          //   }
          // }
          itemName: {
            style: {
              fill: color,
            }
          }
        })
      }
  
@@ -639,6 +708,26 @@
    MKEmitter.emit('addButton', card.uuid, newcard)
  }

  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border', 'padding', 'margin'], card.style)
  }

  getStyle = (comIds, style) => {
    const { card } = this.state

    if (comIds.length !== 1 || comIds[0] !== card.uuid) return

    let _card = {...card, style}

    this.setState({
      card: _card
    })
    
    this.props.updateConfig(_card)
  }

  render() {
    const { card } = this.state

@@ -655,6 +744,7 @@
              <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" />
              <Icon className="plus" title="添加按钮" onClick={this.addButton} type="plus-square" />
              <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
              <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />
              <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
              <SettingComponent config={card} updateConfig={this.updateComponent}/>
            </div>
@@ -666,11 +756,9 @@
          type="chart"
          plus="false"
          config={card}
          // setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')}
          updateaction={this.updateComponent}
        />
        <div className="canvas" id={card.uuid}></div>
        
      </div>
    )
  }