2023-02-06

king

2023-02-06 7090326d3b7faa8122df3808832745e6fdda749b

2023-02-06

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

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Modal, Form, Row, Col, Select, Radio, Tooltip, Input, InputNumber, Tabs, Button } from 'antd'
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons'
import { QuestionCircleOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import { chartColors } from '@/utils/option.js'
@@ -44,6 +44,18 @@
        inputType: 'color',
        editable: true,
        width: '40%',
        render: (text, record) => {
          return (<div style={{width: '80px', height: '23px', background: text}}></div>)
        }
      },
    ],
    barColorColumns: [
      {
        title: '颜色',
        dataIndex: 'color',
        inputType: 'color',
        editable: true,
        width: '70%',
        render: (text, record) => {
          return (<div style={{width: '80px', height: '23px', background: text}}></div>)
        }
@@ -745,10 +757,28 @@
    this.setState({plot})
  }

  addbarColor = () => {
    let plot = fromJS(this.state.plot).toJS()
    plot.barcolors = plot.barcolors || []

    plot.barcolors.push({
      uuid: Utils.getuuid(),
      color: 'rgb(91, 143, 249)'
    })

    this.setState({plot})
  }

  changeColor = (colors) => {
    const { plot } = this.state

    this.setState({plot: {...plot, colors}})
  }

  changebarColor = (colors) => {
    const { plot } = this.state

    this.setState({plot: {...plot, barcolors: colors}})
  }

  changeCustom = (customs) => {
@@ -759,7 +789,7 @@

  render() {
    const { config } = this.props
    const { view, visible, datatype, plot, ramp, colorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist } = this.state
    const { view, visible, datatype, plot, ramp, colorColumns, barColorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -818,9 +848,14 @@
                {datatype === 'statistics' ? <Button className="color-add mk-green" onClick={this.addColor}>添加</Button> : null}
                {datatype === 'statistics' ? <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={ramp ==='true' ? rampStatColorColumns : statColorColumns} onChange={this.changeColor}/> : null}
                {datatype !== 'statistics' ? <EditTable actions={['edit']} data={plot.colors || []} columns={ramp ==='true' ? rampColorColumns : colorColumns} onChange={this.changeColor}/> : null}
                {plot.chartType === 'bar' && plot.datatype === 'query' ? <div className="mk-bar-colors">
                  <p>柱形颜色：可根据柱图序号设置颜色。注：使用自定义图形设置或多根柱图时无效</p>
                  <div className="bar-color-add"><PlusOutlined onClick={this.addbarColor}/></div>
                  <EditTable actions={['edit', 'move', 'del']} data={plot.barcolors || []} columns={barColorColumns} onChange={this.changebarColor}/>
                </div> : null}
              </div>
            </TabPane> : null}
            {plot ? <TabPane tab="自定义设置" disabled={datatype === 'statistics'} key="custom">
            {plot ? <TabPane tab="自定义图形设置" disabled={datatype === 'statistics'} key="custom">
              <Col span={12}>
                <Form {...formItemLayout}>
                  <Form.Item label="是否启用" style={{marginBottom: 10}}>

 src/menu/components/chart/antv-bar/chartcompile/index.scss

@@ -22,6 +22,17 @@
  .ant-table-column-title {
    white-space: nowrap;
  }
  .mk-bar-colors {
    padding-top: 30px;

    .bar-color-add {
      text-align: right;
      color: #26C281;
      font-size: 24px;
      padding-right: 10px;
      margin-top: -40px;
    }
  }
}



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

@@ -1478,6 +1478,7 @@
    let _valfield = 'value'
    let _typefield = 'key'
    let colorIndex = 0
    let barcolors = {}

    if (plot.datatype === 'statistics') {
      _valfield = plot.InfoValue
@@ -1490,6 +1491,14 @@
      if (plot.enabled === 'true') {
        this.customrender(data)
        return
      }

      if (plot.barcolors && plot.barcolors.length > 0 && plot.Yaxis.length === 1) {
        data.forEach((item, i) => {
          if (plot.barcolors[i]) {
            barcolors[item[plot.Xaxis]] = plot.barcolors[i].color
          }
        })
      }

      const ds = new DataSet()
@@ -1624,8 +1633,10 @@

      if (plot.$colors) {
        let limit = chartColors.length
        _chart.color(_typefield, (key) => {
          if (plot.$colors.has(key)) {
        _chart.color(`${_typefield}*${plot.Xaxis}`, (key, label) => {
          if (barcolors[label]) {
            return barcolors[label]
          } else if (plot.$colors.has(key)) {
            return plot.$colors.get(key)
          } else {
            colorIndex++
@@ -1686,8 +1697,10 @@

      if (plot.$colors) {
        let limit = chartColors.length
        _chart.color(_typefield, (key) => {
          if (plot.$colors.has(key)) {
        _chart.color(`${_typefield}*${plot.Xaxis}`, (key, label) => {
          if (barcolors[label]) {
            return barcolors[label]
          } else if (plot.$colors.has(key)) {
            return plot.$colors.get(key)
          } else {
            colorIndex++