2021-06-04

king

2021-06-04 abe942f4c6d49a6ad42acaf8e74f5f02b5ffc089

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

@@ -357,6 +357,7 @@
    let fields = []
    let legends = []
    let transfield = {}
    let Bar_axis = []

    card.columns.forEach(col => {
      if (col.field) {
@@ -391,11 +392,9 @@
        colorIndex++
      }

      if (item.chartType === 'bar' && !hasBar) {
      if (item.chartType === 'bar') {
        Bar_axis.push(item.type)
        hasBar = true
      } else if (item.chartType === 'bar') {
        item.chartType = 'line'
        item.shape = 'smooth'
      }

      if (item.axis === 'true' && axisIndex < 2) {
@@ -432,13 +431,24 @@
      }
    })

    let padding = [10, 30, 30, 30]
    if (plot.mutilBar === 'overlap') {
      Bar_axis = []
    }

    if (!Bar_axis.length) {
      if (axisIndex === 2) {
        padding = [10, 50, 30, 50]
      } else if (axisIndex === 1) {
        padding = [10, 30, 30, 50]
      }
    }

    const chart = new Chart({
      container: card.uuid + 'canvas',
      autoFit: true,
      height: plot.height || 400
      height: plot.height || 400,
    })

    chart.data(dv.rows)

    // chart.axis(plot.Xaxis, { label: { style: { fill: color } }, tickLine: {style: { stroke: color }}, line: { style: { stroke: color } } })
    chart.axis(plot.Xaxis, { label: { style: { fill: color } } })
@@ -472,16 +482,181 @@
      nice: true
    })

    fields.forEach(item => {
      chart.axis(item.name, item.axis)
    if (Bar_axis.length) {
      const view1 = chart.createView({
        region: {
          start: { x: 0, y: 0 },
          end: { x: 1, y: 1 }
        },
        padding
      })
      const dst = new DataSet()
      const dvt = dst.createView().source(data)
      
      chart.scale(item.name, {
      dvt.transform({
        type: 'fold',
        fields: [...Bar_axis],
        key: 'key',
        value: 'value'
      })
  
      dvt.transform({
        type: 'map',
        callback(row) {
          row.key = transfield[row.key] || row.key
          return row
        },
      })

      view1.data(dvt.rows)
      view1.interaction('other-visible')
      view1.scale('value', {
        nice: true,
        range: [0, 0.9]
      })

      if (item.chartType === 'bar') {
        let _chart = chart
      view1.legend(false)

      let colors = new Map()
      let colorIndex = 0

      if (plot.colors && plot.colors.length > 0) {
        plot.colors.forEach(item => {
          if (!colors.has(transfield[item.type])) {
            colors.set(transfield[item.type], item.color)
          }
        })
      }
  
      if (plot.mutilBar !== 'stack') {
        let _chart = view1
          .interval()
          .position(`${plot.Xaxis}*value`)
          .adjust([
            {
              type: 'dodge',
              marginRatio: 0
            }
          ])
          .shape(plot.shape || 'rect')
          .tooltip(`${plot.Xaxis}*value*key`, (name, value, key) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: key,
              value: value
            }
          })

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

        if (plot.barSize || plot.correction) {
          _chart.size(plot.barSize || 35)
        }
        if (plot.barRadius) {
          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
        }
      } else if (plot.mutilBar === 'stack') {
        let _chart = view1
          .interval()
          .position(`${plot.Xaxis}*value`)
          .adjust('stack')
          .shape(plot.shape || 'rect')
          .tooltip(`${plot.Xaxis}*value*key`, (name, value, type) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              name: type,
              value: value
            }
          })
  
        if (plot.colors && plot.colors.length > 0) {
          let limit = chartColors.length
          _chart.color('key', (key) => {
            if (colors.get(key)) {
              return colors.get(key)
            } else {
              colors.set(key, chartColors[colorIndex % limit])
              colorIndex++
            }
          })
        } else {
          _chart.color('key')
        }
        if (plot.label === 'true') {
          _chart.label('value', (value) => {
            if (plot.show === 'percent') {
              value = value + '%'
            }
            return {
              content: value,
              style: {
                fill: color
              }
            }
          })
        }

        if (plot.barSize || plot.correction) {
          _chart.size(plot.barSize || 35)
        }
        if (plot.barRadius) {
          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
        }
      }
    }

    const view2 = chart.createView({
      region: {
        start: { x: 0, y: 0 },
        end: { x: 1, y: 1 }
      },
      padding
    })

    view2.data(dv.rows)
    view2.interaction('other-visible')

    view2.legend(false)

    fields.forEach(item => {
      if (item.chartType === 'bar' && !Bar_axis.length) {
        view2.axis(item.name, item.axis)
      
        view2.scale(item.name, {
          nice: true,
          range: [0, 0.9]
        })

        let _chart = view2
          .interval()
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)
@@ -516,7 +691,16 @@
          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
        }
      } else if (item.chartType === 'line') {
        let _chart = chart
        if (!Bar_axis.length) {
          view2.axis(item.name, item.axis)
        } else {
          view2.axis(item.name, { grid: null, title: null, label: null })
        }
        view2.scale(item.name, {
          nice: true,
          range: [0, 0.9]
        })
        let _chart = view2
          .line()
          .position(`${plot.Xaxis}*${item.name}`)
          .color(item.color)