go-viee-fetch-Demo/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts

import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { PieCircleCommenConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import { pad, padEnd } from 'lodash'
import { calcPadding } from '@visactor/vchart/esm/util'
export const includes = ['legend']


const otherConfig = {
  // 轮播动画
  isCarousel: false,
  color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
  selectOption: {
    show: true,
    selectValue: 'day',
    dataset: [
      { label: '今日', value: 'day' },
      { label: '本周', value: 'week' },
      { label: '本月', value: 'month' }
    ]
  },
  titleText: '今日数据',
  titleOption: {
    color: '#ffffff',
    fontSize: '17px',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'CustomFont',
  },
  headerOption: {
    paddingLeft: 30,
    paddingRight:0,
    paddingTop: 0,
    paddingBottom: 0
  }
}

// ECharts配置
export const option = {
  ...otherConfig,
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },

  title: {
    // text: total, /
    subtext: '总数',
    left: '30%',
    top: 'center',
    textAlign: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 35,
      fontWeight: 'bold',
      lineHeight: 40
    },
    subtextStyle: {
      color: '#ced4da',
      fontSize: 15
    },
    itemGap: 1
  },

  legend: {
    show: true,
    orient: 'vertical',
    left: '60%',
    top: 'center',
    itemGap: 15,
    itemWidth: 10,
    itemHeight: 35,
    formatter: (name: string) => name,
    icon: 'roundRect',
    textStyle: {
      rich: {
        title: {
          fontSize: 14,
          color: '#ffffff',
          align: 'left',
          padding: [0, 0, 10, 10]
        },
        detail: {
          fontSize: 14,
          color: '#ced4da',
          align: 'left',
          padding: [0, 0, 0, 10]

        }
      }
    }
  },

  series: [
    {
      // name: '总数',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['30%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false
        }
      },
      labelLine: {
        show: false
      }
    }
  ],  // 使用dataset关联数据
  dataset: { ...dataJson }
};

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = PieCircleCommenConfig.key

  public chartConfig = cloneDeep(PieCircleCommenConfig)

  // 图表配置项
  public option = echartOptionProfixHandle(option, includes)
}