config.ts 5.43 KB
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { OverrideMapBaseConfig } from './index'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'

//省市区枚举
export const enum areaEnum {
  PROVINCE = 'PROVINCE', //省份
  CITY = 'CITY', //城市
  COUNTY = 'COUNTY', //县
  COUNTRY = 'COUNTRY', //国家
  TOWN = 'TOWN', //镇
  DISTRICT = 'DISTRICT' //地区
}

export interface regionInfo {
  provinceValue:string
  cityValue: string|null
  countyValue: string|null
  levelStr:areaEnum
}

type itemOption = {
  label:string
  value:string
}
export interface regionOption{
  provinceOptions: itemOption[],
  cityOptions: itemOption[],
  countryOptions: itemOption[]
}

//父级地区编码和级别接口
export interface historyParentType {
  adcode: number
  level: string
}

export interface backMapLevel{
  (levelStr:string): boolean
  (level:string): boolean
  (): void
  (): void
}

export const includes = []

export const option = {
  iconColor: 'black',
  showIcon: false,
  iconDistanceRight: 20,
  iconDistanceTop: 20,
  drillingIn: false,
  dataset: dataJson,
  saveClickRegion: {
    level: ''
  },
  mapRegion: {
    adcode: 'china',
    showHainanIsLands: true,
    saveSelect: {
      levelStr: areaEnum.COUNTRY,
      cityValue:null, 
      countyValue:null,
      provinceValue:'china'
    }
  },
  tooltip: {
    show: true,
    trigger: 'item'
  },
  visualMap: {
    show: true,
    orient: 'vertical',
    pieces: [
      { gte: 1000, label: '>1000' }, // 不指定 max,表示 max 为无限大(Infinity)。
      { gte: 600, lte: 999, label: '600-999' },
      { gte: 200, lte: 599, label: '200-599' },
      { gte: 50, lte: 199, label: '49-199' },
      { gte: 10, lte: 49, label: '10-49' },
      { lte: 9, label: '<9' } // 不指定 min,表示 min 为无限大(-Infinity)。
    ],
    inRange: {
      // 渐变颜色,从小到大
      color: ['#c3d7df', '#5cb3cc', '#8abcd1', '#66a9c9', '#2f90b9', '#1781b5']
    },
    textStyle: {
      color: '#fff'
    }
  },
  geo: {
    show: false,
    type: 'map',
    roam: false,
    map: 'china',
    selectedMode: false, //是否允许选中多个区域
    zoom: 1
  },
  series: [
    {
      name: '',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 4,
      legendHoverLink: true,
      showEffectOn: 'render',
      rippleEffect: {
        scale: 6,
        color: '#FFFFFF',
        brushType: 'fill'
      },
      tooltip: {
        show: true,
        backgroundColor: 'rgba(0,0,0,.6)',
        borderColor: 'rgba(147, 235, 248, .8)',
        textStyle: {
          color: '#FFF'
        }
      },
      label: {
        formatter: '{b}',
        fontSize: 11,
        offset: [0, 2],
        position: 'bottom',
        textBorderColor: '#fff',
        textShadowColor: '#000',
        textShadowBlur: 10,
        textBorderWidth: 0,
        color: '#FFFFFF',
        show: true
      },
      itemStyle: {
        color: '#FFFFFF',
        borderColor: 'rgba(225,255,255,2)',
        borderWidth: 4,
        shadowColor: '#E1FFFF',
        shadowBlur: 10
      },
      data: []
    },
    {
      name: '区域',
      type: 'map',
      map: 'china',
      data: [],
      selectedMode: false,
      zoom: 1,
      geoIndex: 1,
      tooltip: {
        show: true,
        backgroundColor: '#00000060',
        borderColor: 'rgba(147, 235, 248, 0.8)',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 12
        }
      },
      label: {
        show: false,
        color: '#FFFFFF',
        fontSize: 12
      },
      emphasis: {
        disabled: false,
        label: {
          color: '#FFFFFF',
          fontSize: 12
        },
        itemStyle: {
          areaColor: '#389BB7',
          shadowColor: '#389BB7',
          borderWidth: 1
        }
      },
      itemStyle: {
        borderColor: '#93EBF8',
        borderWidth: 1,
        areaColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [
            {
              offset: 0,
              color: '#93ebf800' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#93ebf820' // 100% 处的颜色
            }
          ],
          globalCoord: false
        },
        shadowColor: '#80D9F842',
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10
      }
    },
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度,值越小速度越快
        trailLength: 0.4, //特效尾迹长度[0,1]值越大,尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 7 //图标大小
      },
      lineStyle: {
        normal: {
          color: '#4fb6d2',
          width: 1, //线条宽度
          opacity: 0.1, //尾迹线条透明度
          curveness: 0.3 //尾迹线条曲直度
        }
      },
      data: []
    }
  ]
}

export type optionType = typeof option

export const MapDefaultConfig = { ...option }
export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = OverrideMapBaseConfig.key
  public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
  public chartConfig = cloneDeep(OverrideMapBaseConfig)
  public option = echartOptionProfixHandle(option, includes)
}