daikins/src/views/home/cd/chartData.ts

import { color, type EChartsOption } from 'echarts'

//数字转千分位
export function formatNum(num: any) {
  const n = String(num.toFixed(0)).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
  return n
}

export function totalPieCharData(arr: any = [], colorList: any = {}) {
  // const color: any = []
  // const data = arr.map((item: any) => {
  //   color.push(colorList[item.moduleCode])
  //   return {
  //     name: item.moduleName,
  //     value: item.visitCount,
  //     _code: item.moduleCode
  //   }
  // })
  const option: EChartsOption = {
    tooltip: {
      // formatter: '{b} : {c}百万 ({d}%)',
      // formatter: '{b} : {c} ({d}%)',
      formatter: function (params: any) {
        return (
          params.data.name +
          ' : ' +
          formatNum(params.data.value) +
          '\n' +
          '(' +
          params.percent +
          '%' +
          ')'
        )
      },
      trigger: 'item'
    },
    legend: {
      show: false,
      // top: '5%',
      left: 'center',
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    graphic: {
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text:
          '总计' + //圆饼中心显示数据，这里是显示得总数
          '\n',
        fill: '#fff',
        fontSize: 14,
        lineHeight: 20,
        width: 30,
        height: 30,
        textAlign: 'center'
      }
    },
    grid: {
      containLabel: true
    },
    series: [
      {
        // name: 'Access',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          color: '#fff',
          fontSize: 12,
          formatter: '{b} ({d}%)'
          // position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold',
        //     color: '#fff'
        //   }
        // },
        // labelLine: {
        //   show: true
        // },
        data: []
      }
    ]
  }
  return option
}

export function totalBarCharData(params: any = {}) {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      // type: 'scroll',
      data: ['Evaporation', 'Precipitation', 'Temperature'],
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    grid: {
      left: '7%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: [],
        axisPointer: {
          type: 'shadow'
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    // graphic: {
    //   type: 'text',
    //   left: '0',
    //   top: 'center',
    //   rotation: 90,
    //   style: {
    //     text: '千元',
    //     fill: '#fff',
    //     fontSize: 14,
    //     textAlign: 'center'
    //   }
    // },
    yAxis: [
      {
        type: 'value',
        name: '千元',
        // min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: '{value}',
          color: '#fff'
        },
        nameTextStyle: {
          color: '#fff',
          align: 'right',
          padding: [0, 8, 0, 0]
        },
        // nameRotate: 90,
        // nameTruncate: {
        //   maxWidth: 80,
        //   ellipsis: '...'
        // },
        // nameLocation: 'left',
        // nameGap: 50,
        axisLine: {
          lineStyle: {
            color: '#1f78af',
            width: 2 //y轴宽度，这里是为了突出显示加上的
          }
        }
      },
      {
        type: 'value',
        // name: 'Temperature',
        // min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: '{value}',
          color: '#fff'
        }
      }
    ],
    series: []
  }

  return option
}

export function disBarCharData(params: any = {}) {
  const option = {
    minBusSeeds: '',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      left: 'center',
      right: 'center',
      type: 'scroll',
      pageIconInactiveColor: '#aaa',
      pageIconColor: '#fff',
      selector: [
        // {
        //   // 全选
        //   type: 'all',
        //   // 可以是任意你喜欢的标题
        //   title: '全选'
        // }
        // {
        //   // 反选
        //   type: 'inverse',
        //   // 可以是任意你喜欢的标题
        //   title: '反选'
        // }
      ],
      selectorLabel: {
        backgroundColor: '#fff',
        color: '#000'
      },
      pageTextStyle: {
        color: '#fff'
      },
      data: [],
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    grid: {
      left: '6%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      name: '千元',
      axisLabel: {
        color: '#fff'
      },
      nameTextStyle: {
        color: '#fff',
        align: 'right',
        padding: [0, 8, 0, 0]
      }
      // nameRotate: 90,
      // nameTruncate: {
      //   maxWidth: 80,
      //   ellipsis: '...'
      // },
      // nameLocation: 'end'
      // nameGap: 50
    },
    xAxis: {
      type: 'category',
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data: [],
      axisLabel: {
        color: '#fff'
      }
    },
    series: []
    // series: [
    //   {
    //     name: 'Direct',
    //     type: 'bar',
    //     stack: 'total',
    //     label: {
    //       show: true
    //     },
    //     emphasis: {
    //       focus: 'series'
    //     },
    //     data: [320, 302, 301, 334, 390, 330, 320]
    //   },
    // ]
  }

  return option
}