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'

export const includes = ['legend']
export const selectStyleOption = {
  showAngle: false,
  color: '#1B9FCC',
  backgroundColor: '#0F4557',
  borderTop: '1px solid #1CA4D2',
  cursor: 'pointer',
  borderRadius: '2px',
}
const otherConfig = {
  // 轮播动画
  isCarousel: false,
  color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
  selectOption: {
    show: true,
    selectValue: 'day',
    dataset: [
      {
        label: '当天',
        value: 'day'
      },
      {
        label: '本周',
        value: 'week'
      },
      {
        label: '当月',
        value: 'month'
      },
      {
        label: '本季度',
        value: 'quarter'
      },
      {
        label: '当年',
        value: 'year'
      }
    ]
  },
  titleText: '报警统计',
  titleOption: {
    color: '#ffffff',
    fontSize: '17px',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'CustomFont',
  },
  headerOption: {
    paddingLeft: 30,
    paddingRight: 0,
    paddingTop: 0,
    paddingBottom: 0
  }, selectStyleOption: {

  }
}
// 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: ['31.4%', '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)
}