import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { CustomEchartsConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'

export const option = {
  //数据源设置 默认设置一个
  dataset: `
  {
    backgroundColor: 'transparent',
    tooltip: {
        trigger: 'none'
    },
    xAxis: {
        data: ["百分比"],
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false,
            textStyle: {
                color: '#e54035'
            }
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    series: [{
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [300, 45],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
            normal: {
                color: '#363F5E'
            }
        },
        data: [{
            value: 100,
            symbolPosition: 'end'
        }]
    }, {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [300, 45],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
            normal: {
                color: '#2B5B4D'
            }
        },
        data: [{
            value: 30,
            symbolPosition: 'end'
        }]
    }, {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [300, 45],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
            normal: {
                color: '#01CC04'
            }
        },
        data: [101 - 40]
    }, {
        //底部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
            normal: {
                color: '#01CC04',
                opacity: .7
            }
        },
        label: {
            show: true,
            position: "top",
            distance: 15,
            color: "#FFFE00",
            fontSize:50,
            formatter:'{c}'+'%'
        },
        
        silent: true,
        barWidth: 300,
        barGap: '-100%', // Make series be overlap
        data: [30]
    }, {
        //上部立体柱
        stack: '1',
        type: 'bar',
        itemStyle: {
            normal: {
                color: '#36405E',
                opacity: .7
            }
        },
        silent: true,
        barWidth: 300,
        barGap: '-100%', // Make series be overlap
        data: [100 - 30]
    }]
}
  `
}

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = CustomEchartsConfig.key
  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
  public chartConfig = cloneDeep(CustomEchartsConfig)
  public option = cloneDeep(option)
}