2021-06-05

king

2021-06-05 c6f7462d80ab626174329b69045fb7e5704c0683

2021-06-05

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

@@ -8,34 +8,34 @@
 * @param {object} card       // 图表对象
 */
export function getBaseForm (card) {
  let appType = sessionStorage.getItem('appType')
  let menulist = null
  // let appType = sessionStorage.getItem('appType')
  // let menulist = null

  if (appType === 'pc') {
    menulist = sessionStorage.getItem('appMenus')
    if (Array.isArray(card.linkmenu)) {
      card.linkmenu = ''
    }
  } else {
    menulist = sessionStorage.getItem('fstMenuList')
  }
  // if (appType === 'pc') {
  //   menulist = sessionStorage.getItem('appMenus')
  //   if (Array.isArray(card.linkmenu)) {
  //     card.linkmenu = ''
  //   }
  // } else {
  //   menulist = sessionStorage.getItem('fstMenuList')
  // }

  if (menulist) {
    try {
      menulist = JSON.parse(menulist)
      if (appType === 'pc') {
        menulist = menulist.map(item => {
          item.value = item.MenuID
          item.text = item.MenuName
          return item
        })
      }
    } catch {
      menulist = []
    }
  } else {
    menulist = []
  }
  // if (menulist) {
  //   try {
  //     menulist = JSON.parse(menulist)
  //     if (appType === 'pc') {
  //       menulist = menulist.map(item => {
  //         item.value = item.MenuID
  //         item.text = item.MenuName
  //         return item
  //       })
  //     }
  //   } catch {
  //     menulist = []
  //   }
  // } else {
  //   menulist = []
  // }

  let roleList = sessionStorage.getItem('sysRoles')
  if (roleList) {
@@ -94,38 +94,38 @@
      required: false,
      options: roleList
    },
    {
      type: 'cascader',
      key: 'linkmenu',
      label: '关联菜单',
      initVal: card.linkmenu || [],
      tooltip: '在使用柱形图且未启用自定义设置时有效。',
      required: false,
      forbid: appType === 'pc' || appType === 'mob',
      options: menulist
    },
    {
      type: 'select',
      key: 'linkmenu',
      label: '关联菜单',
      initVal: card.linkmenu || '',
      tooltip: '双击柱状图，会打开关联的菜单。',
      required: false,
      forbid: appType !== 'pc',
      options: menulist
    },
    {
      type: 'radio',
      key: 'open',
      label: '打开方式',
      initVal: card.open || 'blank',
      required: false,
      forbid: appType !== 'pc',
      options: [
        { value: 'blank', text: '新窗口' },
        { value: 'self', text: '当前窗口' }
      ]
    }
    // {
    //   type: 'cascader',
    //   key: 'linkmenu',
    //   label: '关联菜单',
    //   initVal: card.linkmenu || [],
    //   tooltip: '在使用柱形图且未启用自定义设置时有效。',
    //   required: false,
    //   forbid: appType === 'pc' || appType === 'mob',
    //   options: menulist
    // },
    // {
    //   type: 'select',
    //   key: 'linkmenu',
    //   label: '关联菜单',
    //   initVal: card.linkmenu || '',
    //   tooltip: '双击柱状图，会打开关联的菜单。',
    //   required: false,
    //   forbid: appType !== 'pc',
    //   options: menulist
    // },
    // {
    //   type: 'radio',
    //   key: 'open',
    //   label: '打开方式',
    //   initVal: card.open || 'blank',
    //   required: false,
    //   forbid: appType !== 'pc',
    //   options: [
    //     { value: 'blank', text: '新窗口' },
    //     { value: 'self', text: '当前窗口' }
    //   ]
    // }
  ]
}

@@ -331,6 +331,20 @@
      }]
    }, {
      type: 'radio',
      key: 'area',
      label: '面积图',
      initVal: card.area || 'false',
      required: false,
      forbid: ['bar'].includes(card.chartType),
      options: [{
        value: 'true',
        text: '显示'
      }, {
        value: 'false',
        text: '不显示'
      }]
    }, {
      type: 'radio',
      key: 'repeat',
      label: '重复数据',
      initVal: card.repeat || 'unrepeat',
@@ -388,6 +402,15 @@
      tooltip: '坐标轴提示文字及示例的颜色。',
      required: false
    }, {
      type: 'color',
      key: 'selectColor',
      label: '选中颜色',
      initVal: card.selectColor || '',
      tooltip: '选中柱形图的颜色，在交互效果《元素选中（多选）》和《元素选中（单选）》中有效，自定义设置中无效。',
      forbid: !['bar'].includes(card.chartType),
      allowClear: true,
      required: false
    }, {
      type: 'select',
      key: 'interaction',
      label: '交互效果',

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

@@ -373,7 +373,7 @@
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(
                <ColorSketch />
                <ColorSketch allowClear={item.allowClear} />
              )}
            </Form.Item>
          </Col>

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

@@ -75,7 +75,7 @@
        parentId: card.parentId || '',
        format: 'array',   // 组件属性 - 数据格式
        pageable: false,   // 组件属性 - 是否可分页
        switchable: false, // 组件属性 - 数据是否可切换
        switchable: card.type === 'bar' ? true : false, // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
        width: _plot.width,
        name: _plot.name,
@@ -348,6 +348,23 @@
          .color('key')
          .size(3)
          .shape('circle')
      }

      if (plot.area === 'true') {
        let area = chart.area().shape(plot.shape || 'smooth').position(`${X_axis}*value`).tooltip(false)
        if (plot.colors && plot.colors.length > 0) {
          let limit = chartColors.length
          area.color('key', (key) => {
            if (colors.has(key)) {
              return colors.get(key)
            } else {
              colorIndex++
              return chartColors[(colorIndex - 1) % limit]
            }
          })
        } else {
          area.color('key')
        }
      }

      if (plot.interaction && plot.interaction.length) {
@@ -926,6 +943,15 @@
        if (plot.barSize || plot.correction) {
          _chart.size(plot.barSize || 35)
        }
        if (plot.selectColor) {
          _chart.state({
            selected: {
              style: {
                fill: plot.selectColor,
              }
            }
          })
        }
        if (plot.barRadius) {
          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
        }
@@ -975,6 +1001,15 @@
        if (plot.barSize || plot.correction) {
          _chart.size(plot.barSize || 35)
        }
        if (plot.selectColor) {
          _chart.state({
            selected: {
              style: {
                fill: plot.selectColor,
              }
            }
          })
        }
        if (plot.barRadius) {
          _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
        }

 src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx

@@ -281,6 +281,23 @@
        text: '累加'
      }]
    }, {
      type: 'number',
      key: 'splitLine',
      label: '分隔线',
      initVal: card.splitLine || '',
      tooltip: '分隔线的宽度。',
      min: 0,
      max: 20,
      decimal: 0,
      required: false
    }, {
      type: 'color',
      key: 'splitColor',
      label: '分隔色',
      initVal: card.splitColor || '#ffffff',
      tooltip: '分隔线的颜色，存在分隔线时有效。',
      required: false
    }, {
      type: 'color',
      key: 'color',
      label: '色系',

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

@@ -289,11 +289,13 @@
          value: percent,
        }
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      })

    if (plot.splitLine) {
      chart1.style({
        lineWidth: plot.splitLine,
        stroke: plot.splitColor,
      })
    }
    if (plot.label !== 'false') {
      chart1.label(type, {
        offset: -10,
@@ -330,68 +332,71 @@
          value: value
        }
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      })

      if (plot.label !== 'false') {
        if (plot.label === 'inner') {
          chart2.label(Y_axis, {
            offset: -30,
            content: (data) => {
              let _label = ''
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              if (plot.label === 'inner') {
                _label = _val
              } else {
                _label = `${data[X_axis]}: ${_val}`
              }
              return _label
            },
            style: {
              textAlign: 'center',
              fontSize: 16,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)',
              fill: '#fff',
    if (plot.splitLine) {
      chart2.style({
        lineWidth: plot.splitLine,
        stroke: plot.splitColor,
      })
    }

    if (plot.label !== 'false') {
      if (plot.label === 'inner') {
        chart2.label(Y_axis, {
          offset: -30,
          content: (data) => {
            let _label = ''
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }
          })
        } else {
          chart2.label(Y_axis, {
            layout: { type: 'pie-spider' },
            labelHeight: 20,
            content: (data) => {
              let _label = ''
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              if (plot.label === 'inner') {
                _label = _val
              } else {
                _label = `${data[X_axis]}: ${_val}`
              }
              return _label
            },
            labelLine: {
              style: {
                lineWidth: 0.5,
              },
            },
            style: {
              fill: color
            if (plot.label === 'inner') {
              _label = _val
            } else {
              _label = `${data[X_axis]}: ${_val}`
            }
          })
        }
            return _label
          },
          style: {
            textAlign: 'center',
            fontSize: 16,
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)',
            fill: '#fff',
          }
        })
      } else {
        chart2.label(Y_axis, {
          layout: { type: 'pie-spider' },
          labelHeight: 20,
          content: (data) => {
            let _label = ''
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }
            if (plot.label === 'inner') {
              _label = _val
            } else {
              _label = `${data[X_axis]}: ${_val}`
            }
            return _label
          },
          labelLine: {
            style: {
              lineWidth: 0.5,
            },
          },
          style: {
            fill: color
          }
        })
      }
    }
    
    if (plot.interaction && plot.interaction.length) {
      plot.interaction.forEach(t => {
@@ -488,6 +493,7 @@
      })
    }

    // 饼图或环图
    if (plot.shape !== 'nightingale') {
      let _chart = chart
        .interval()
@@ -503,6 +509,14 @@
            value: value
          }
        })

      if (plot.splitLine) {
        _chart.style({
          lineWidth: plot.splitLine,
          stroke: plot.splitColor,
        })
      }

      if (plot.label !== 'false') {
        if (plot.label === 'inner') {
          _chart.label(Y_axis, {
@@ -578,9 +592,11 @@
          }

          _chart.label(X_axis, _label)
          .style({
            lineWidth: 1,
            stroke: '#fff',
        }
        if (plot.splitLine) {
          _chart.style({
            lineWidth: plot.splitLine,
            stroke: plot.splitColor,
          })
        }
    }

 src/mob/colorsketch/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { SketchPicker } from 'react-color'
import { Popover } from 'antd'
import { Popover, Icon } from 'antd'

import './index.scss'

@@ -20,10 +20,11 @@
  }
  state = {
    color: '',
    allowClear: false
  }

  UNSAFE_componentWillMount () {
    const { defaultValue, value } = this.props
    const { defaultValue, value, allowClear } = this.props
    let initVal = ''

    if (this.props['data-__meta']) {
@@ -34,7 +35,7 @@
      initVal = value
    }
    
    this.setState({color: initVal})
    this.setState({color: initVal, allowClear: allowClear === true})
  }

  handleChange = (color) => {
@@ -45,6 +46,12 @@
    })
  }

  clear = () => {
    this.setState({ color: '' }, () => {
      this.props.onChange && this.props.onChange('')
    })
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== undefined && nextProps.value !== this.state.color) {
      this.setState({ color: nextProps.value })
@@ -52,7 +59,7 @@
  }

  render() {
    const { color } = this.state
    const { color, allowClear } = this.state
    return (
      <div className="color-sketch-block">
        <Popover content={
@@ -62,7 +69,7 @@
            <div className="color-sketch-block-inner" style={ {background: color} }></div>
          </div>
        </Popover>
        <div className="color-sketch-value">{color}</div>
        <div className="color-sketch-value">{color}{allowClear && color ? <Icon onClick={this.clear} type="close"/> : null}</div>
      </div>
    )
  }

 src/mob/colorsketch/index.scss

@@ -18,6 +18,7 @@
    height: 100%;
  }
  .color-sketch-value {
    position: relative;
    display: inline-block;
    font-size: 13px;
    width: 160px;
@@ -27,6 +28,23 @@
    vertical-align: top;
    white-space: nowrap;
    overflow: visible;

    .anticon-close {
      position: relative;
      right: -10px;
      font-size: 10px;
      padding: 3px;
      background: #eeeeee;
      border-radius: 50%;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s;
    }
  }
}
.color-sketch-block:hover {
  .anticon-close {
    opacity: 1;
  }
}


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

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Chart } from '@antv/g2'
import { connect } from 'react-redux'
// import { connect } from 'react-redux'
import DataSet from '@antv/data-set'
import { Spin, Empty, notification } from 'antd'
import moment from 'moment'
@@ -12,7 +12,7 @@
import Api from '@/api'
import Utils from '@/utils/utils.js'
import UtilsDM from '@/utils/utils-datamanage.js'
import { modifyTabview } from '@/store/action'
// import { modifyTabview } from '@/store/action'
import MKEmitter from '@/utils/events.js'
import './index.scss'

@@ -518,7 +518,7 @@
   * 3、柱状图数据补齐
   */
  getdata = () => {
    const { data, plot, vFields } = this.state
    const { data, plot, vFields, config } = this.state

    if (!data || data.length === 0) {
      this.setState({empty: true})
@@ -563,6 +563,7 @@
          item[col.field] = item[col.field].toFixed(col.decimal)
          item[col.field] = +item[col.field]
        })
        item.$$uuid = item[config.setting.primaryKey] || ''
        return item
      })
    } else if (plot.repeat === 'cumsum') {
@@ -597,6 +598,7 @@
          item[col.field] = item[col.field].toFixed(col.decimal)
          item[col.field] = +item[col.field]
        })
        item.$$uuid = item[config.setting.primaryKey] || ''
        return item
      })
    } else { // plot.repeat === 'unrepeat'
@@ -616,6 +618,8 @@
            item[col.field] = item[col.field].toFixed(col.decimal)
            item[col.field] = +item[col.field]
          })
          
          item.$$uuid = item[config.setting.primaryKey] || ''
          _mdata.set(item[plot.Xaxis], item)
        }
      })
@@ -908,12 +912,16 @@
      })
    }

    if (plot.point === 'true' && plot.$colors) {
      let limit = chartColors.length
      chart
    if (plot.point === 'true') {
      let _chart = chart
        .point()
        .position(`${plot.Xaxis}*${_valfield}`)
        .color(_typefield, (key) => {
        .size(3)
        .shape('circle')

      if (plot.$colors) {
        let limit = chartColors.length
        _chart.color(_typefield, (key) => {
          if (plot.$colors.has(key)) {
            return plot.$colors.get(key)
          } else {
@@ -921,15 +929,31 @@
            return chartColors[(colorIndex - 1) % limit]
          }
        })
        .size(3)
        .shape('circle')
    } else if (plot.point === 'true') {
      chart
        .point()
      } else {
        _chart.color(_typefield)
      }
    }

    if (plot.area === 'true') {
      let area = chart
        .area()
        .shape(plot.shape || 'smooth')
        .position(`${plot.Xaxis}*${_valfield}`)
        .color(_typefield)
        .size(3)
        .shape('circle')
        .tooltip(false)

      if (plot.$colors) {
        let limit = chartColors.length
        area.color(_typefield, (key) => {
          if (plot.$colors.has(key)) {
            return plot.$colors.get(key)
          } else {
            colorIndex++
            return chartColors[(colorIndex - 1) % limit]
          }
        })
      } else {
        area.color(_typefield)
      }
    }

    if (plot.interaction && plot.interaction.length) {
@@ -1285,7 +1309,7 @@
   * @description 柱状图渲染
   */
  barrender = () => {
    const { plot, transfield } = this.state
    const { plot, transfield, config } = this.state

    let _data = []
    let _valfield = 'value'
@@ -1448,6 +1472,15 @@
      if (plot.barSize || plot.correction) {
        _chart.size(plot.barSize || 35)
      }
      if (plot.selectColor) {
        _chart.state({
          selected: {
            style: {
              fill: plot.selectColor,
            }
          }
        })
      }
      if (plot.barRadius) {
        _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
      }
@@ -1494,58 +1527,72 @@
      if (plot.barSize || plot.correction) {
        _chart.size(plot.barSize || 35)
      }
      if (plot.selectColor) {
        _chart.state({
          selected: {
            style: {
              fill: plot.selectColor,
            }
          }
        })
      }
      if (plot.barRadius) {
        _chart.style({ radius: [plot.barRadius, plot.barRadius, 0, 0] })
      }
    }

    if (plot.linkmenu && plot.linkmenu.length > 0) {
      let menu_id = plot.linkmenu.slice(-1)[0]
      let menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || ''
    chart.on('element:click', (ev) => {
      let data = ev.data.data
      MKEmitter.emit('resetSelectLine', config.uuid, (data ? data.$$uuid : ''), null)
    })

      chart.on('element:dblclick', (ev) => {
        if (!menu) {
          notification.warning({
            top: 92,
            message: '菜单已删除或没有访问权限！',
            duration: 5
          })
          return
        }
    // if (plot.linkmenu && plot.linkmenu.length > 0) {
    //   let menu_id = plot.linkmenu.slice(-1)[0]
    //   let menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || ''

        try {
          let data = ev.data.data
          let primaryId = ''
          if (this.state.config.setting.primaryKey && data) {
            primaryId = data[this.state.config.setting.primaryKey] || ''
          }
    //   chart.on('element:dblclick', (ev) => {
    //     if (!menu) {
    //       notification.warning({
    //         top: 92,
    //         message: '菜单已删除或没有访问权限！',
    //         duration: 5
    //       })
    //       return
    //     }

          let newtab = {
            ...menu,
            selected: true,
            param: {
              $BID: primaryId
            }
          }
    //     try {
    //       let data = ev.data.data
    //       let primaryId = ''
    //       if (this.state.config.setting.primaryKey && data) {
    //         primaryId = data[this.state.config.setting.primaryKey] || ''
    //       }

    //       let newtab = {
    //         ...menu,
    //         selected: true,
    //         param: {
    //           $BID: primaryId
    //         }
    //       }
  
          let tabs = this.props.tabviews.filter(tab => {
            tab.selected = false
            return tab.MenuID !== newtab.MenuID
          })
    //       let tabs = this.props.tabviews.filter(tab => {
    //         tab.selected = false
    //         return tab.MenuID !== newtab.MenuID
    //       })
  
          if (this.props.tabviews.length > tabs.length) {
            this.props.modifyTabview(fromJS(tabs).toJS())
          }
    //       if (this.props.tabviews.length > tabs.length) {
    //         this.props.modifyTabview(fromJS(tabs).toJS())
    //       }
  
          this.setState({}, () => {
            tabs.push(newtab)
            this.props.modifyTabview(tabs)
          })
        } catch {
          console.warn('菜单打开失败！')
        }
      })
    }
    //       this.setState({}, () => {
    //         tabs.push(newtab)
    //         this.props.modifyTabview(tabs)
    //       })
    //     } catch {
    //       console.warn('菜单打开失败！')
    //     }
    //   })
    // }

    if (plot.interaction && plot.interaction.length) {
      plot.interaction.forEach(t => {
@@ -1608,17 +1655,18 @@
  }
}

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews,
    permMenus: state.permMenus,
  }
}
// const mapStateToProps = (state) => {
//   return {
//     tabviews: state.tabviews,
//     permMenus: state.permMenus,
//   }
// }

const mapDispatchToProps = (dispatch) => {
  return {
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}
// const mapDispatchToProps = (dispatch) => {
//   return {
//     modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
//   }
// }

export default connect(mapStateToProps, mapDispatchToProps)(LineChart)
// export default connect(mapStateToProps, mapDispatchToProps)(LineChart)
export default LineChart

 src/tabviews/custom/components/chart/antv-pie/index.jsx

@@ -597,18 +597,22 @@
          value: percent,
        }
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
    if (plot.splitLine) {
      chart1.style({
        lineWidth: plot.splitLine,
        stroke: plot.splitColor,
      })
    }
    if (plot.colors && plot.colors.length > 0) {
      let limit = chartColors.length
      chart1.color(type, (_type) => {
        if (colors.has(_type)) {
          return colors.get(_type)
        } else {
          let _c = chartColors[colorIndex % limit]
          colors.set(type, _c)
          colorIndex++
          return chartColors[(colorIndex - 1) % limit]
          return _c
        }
      })
    } else {
@@ -650,82 +654,86 @@
          value: value
        }
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      })

      if (plot.colors && plot.colors.length > 0) {
        let limit = chartColors.length
        chart2.color(X_axis, (type) => {
          if (colors.has(type)) {
            return colors.get(type)
          } else {
            colorIndex++
            return chartColors[(colorIndex - 1) % limit]
    if (plot.splitLine) {
      chart2.style({
        lineWidth: plot.splitLine,
        stroke: plot.splitColor,
      })
    }
    if (plot.colors && plot.colors.length > 0) {
      let limit = chartColors.length
      chart2.color(X_axis, (type) => {
        if (colors.has(type)) {
          return colors.get(type)
        } else {
          let _c = chartColors[colorIndex % limit]
          colors.set(type, _c)
          colorIndex++
          return _c
        }
      })
    } else {
      chart2.color(X_axis)
    }

    if (plot.label !== 'false') {
      if (plot.label === 'inner') {
        chart2.label(Y_axis, {
          offset: -30,
          content: (data) => {
            let _label = ''
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }
            if (plot.label === 'inner') {
              _label = _val
            } else {
              _label = `${data[X_axis]}: ${_val}`
            }
            return _label
          },
          style: {
            textAlign: 'center',
            fontSize: 16,
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)',
            fill: '#fff',
          }
        })
      } else {
        chart2.color(X_axis)
      }

      if (plot.label !== 'false') {
        if (plot.label === 'inner') {
          chart2.label(Y_axis, {
            offset: -30,
            content: (data) => {
              let _label = ''
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              if (plot.label === 'inner') {
                _label = _val
              } else {
                _label = `${data[X_axis]}: ${_val}`
              }
              return _label
            },
            style: {
              textAlign: 'center',
              fontSize: 16,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)',
              fill: '#fff',
        chart2.label(Y_axis, {
          layout: { type: 'pie-spider' },
          labelHeight: 20,
          content: (data) => {
            let _label = ''
            let _val = ''
            if (plot.show !== 'value') {
              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
            } else {
              _val = `${data[Y_axis]}`
            }
          })
        } else {
          chart2.label(Y_axis, {
            layout: { type: 'pie-spider' },
            labelHeight: 20,
            content: (data) => {
              let _label = ''
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              if (plot.label === 'inner') {
                _label = _val
              } else {
                _label = `${data[X_axis]}: ${_val}`
              }
              return _label
            },
            labelLine: {
              style: {
                lineWidth: 0.5,
              },
            },
            style: {
              fill: color
            if (plot.label === 'inner') {
              _label = _val
            } else {
              _label = `${data[X_axis]}: ${_val}`
            }
          })
        }
            return _label
          },
          labelLine: {
            style: {
              lineWidth: 0.5,
            },
          },
          style: {
            fill: color
          }
        })
      }
    }
    if (plot.interaction && plot.interaction.length) {
      plot.interaction.forEach(t => {
        chart.interaction(t)
@@ -845,14 +853,23 @@
            value: value
          }
        })

      if (plot.splitLine) {
        _chart.style({
          lineWidth: plot.splitLine,
          stroke: plot.splitColor,
        })
      }
      if (plot.colors && plot.colors.length > 0) {
        let limit = chartColors.length
        _chart.color(X_axis, (type) => {
          if (colors.has(type)) {
            return colors.get(type)
          } else {
            let _c = chartColors[colorIndex % limit]
            colors.set(type, _c)
            colorIndex++
            return chartColors[(colorIndex - 1) % limit]
            return _c
          }
        })
      } else {
@@ -916,8 +933,10 @@
          if (colors.has(type)) {
            return colors.get(type)
          } else {
            let _c = chartColors[colorIndex % limit]
            colors.set(type, _c)
            colorIndex++
            return chartColors[(colorIndex - 1) % limit]
            return _c
          }
        })
      } else {
@@ -934,9 +953,11 @@
        }

        _chart.label(X_axis, _label)
        .style({
          lineWidth: 1,
          stroke: '#fff',
      }
      if (plot.splitLine) {
        _chart.style({
          lineWidth: plot.splitLine,
          stroke: plot.splitColor,
        })
      }
    }