tjdify/web/app/(commonLayout)/datasets/Statistic.tsx

'use client'

import { useState } from 'react'
import cn from '@/utils/classnames'
import ReactECharts from 'echarts-for-react'
import * as echarts from 'echarts'

const cardClass = 'bg-[#FCFCFC] border rounded-[10px] border-[#E6E7EB] p-6 flex'
const Statistic = () => {
  const [knowledges, setKnowledges] = useState(0)
  const [depts, setDepts] = useState(0)
  const [tags, setTags] = useState(0)
  const [typeData, setTypeData] = useState([])
  const [updateData, setUpdateData] = useState([])
  const [tagData, setTagData] = useState([
    { name: '标签1', value: 100 },
    { name: '标签2', value: 90 },
    { name: '标签3', value: 80 },
    { name: '标签4', value: 70 },
    { name: '标签5', value: 60 },
    { name: '标签6', value: 50 },
    { name: '标签7', value: 40 },
    { name: '标签8', value: 30 },
    { name: '标签9', value: 20 },
    { name: '标签10', value: 10 },
    { name: '标签11', value: 9 },
    { name: '标签12', value: 8 },
    { name: '标签13', value: 7 },
    { name: '标签14', value: 6 },
    { name: '标签15', value: 5 },
  ])
  const typeOptions = {
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'horizontal',
      top: 0,
      itemWidth: 8,
      itemHeight: 8,
    },
    series: [
      {
        type: 'pie',
        radius: ['26%', '50%'],
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
        label: {
          formatter: '{b} {d}%',
        },
        emphasis: {
          disabled: true,
        },
      },
    ],
  }
  const updateOptions = {
    grid: {
      top: 40,
      bottom: 20,
      left: 40,
      right: 0,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        fontSize: 10,
        interval: 0,
        color: 'rgba(87, 98, 117, 1)',
      },
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitNumber: 3,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(239, 241, 248, 1)',
        },
      },
      axisLabel: {
        fontSize: 10,
      },
    },
    series: [
      {
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2078FC' },
            { offset: 1, color: '#5DC9F9' },
          ]),
        },
      },
    ],
  }
  const tagColors = ['#7185fb', '#4bc97d', '#2079fe', '#dba53c', '#4ec5f9']
  const tagOptions = {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'graph',
        layout: 'force',
        data: tagData.sort((a, b) => b.value - a.value).map((v, i) => {
          if (i < Math.floor(tagData.length / 4)) {
            v.symbolSize = 100
            v.label = {
              fontSize: 30,
            }
          }
          else if (i < Math.floor(tagData.length / 2)) {
            v.symbolSize = 90
            v.label = {
              fontSize: 24,
            }
          }
          else if (i < Math.floor(tagData.length * 3 / 4)) {
            v.symbolSize = 80
            v.label = {
              fontSize: 20,
            }
          }
          else {
            v.symbolSize = 70
            v.label = {
              fontSize: 16,
            }
          }
          v.itemStyle = {
            color: tagColors[i % tagColors.length],
          }
          return v
        }),
        links: [],
        roam: true,
        force: {
          repulsion: 110,
          edgeLength: [10, 50],
        },
        symbolSize: 60,
        label: {
          show: true,
          color: '#ffffff',
        },
        emphasis: {
          disabled: true,
        },
      },
    ],
  }
  return (
    <div className="w-full px-12">
      <div className={cn('w-full gap-6', cardClass)}>
        <div className="flex h-[120px] grow items-center bg-[url('/imgs/statistic-bg.png')] bg-[length:100%_100%] bg-no-repeat pl-6">
          <img src="/imgs/statistic-icon-1.png" className="mr-6 h-16 w-16"/>
          <div>
            <div className="text-[36px] text-[#111111]">{knowledges}</div>
            <div className="text-[#111111]">知识库总量</div>
          </div>
        </div>
        <div className="flex h-[120px] grow items-center bg-[url('/imgs/statistic-bg.png')] bg-[length:100%_100%] bg-no-repeat pl-6">
          <img src="/imgs/statistic-icon-2.png" className="mr-6 h-16 w-16"/>
          <div>
            <div className="text-[36px] text-[#111111]">{depts}</div>
            <div className="text-[#111111]">部门总量</div>
          </div>
        </div>
        <div className="flex h-[120px] grow items-center bg-[url('/imgs/statistic-bg.png')] bg-[length:100%_100%] bg-no-repeat pl-6">
          <img src="/imgs/statistic-icon-3.png" className="mr-6 h-16 w-16"/>
          <div>
            <div className="text-[36px] text-[#111111]">{tags}</div>
            <div className="text-[#111111]">标签总量</div>
          </div>
        </div>
      </div>
      <div className='mt-6 flex w-full gap-8'>
        <div className={cn(cardClass, 'h-[360px] flex-1 flex-col overflow-hidden')}>
          <div className="text-2xl font-bold text-[#333333]">知识库类别统计</div>
          <div className="relative mt-3 flex flex-1 items-center justify-center">
            <img src="/imgs/statistic-icon-4.png" className="absolute"/>
            <ReactECharts option={typeOptions} className="flex-1" />
          </div>
        </div>
        <div className={cn(cardClass, 'h-[360px] flex-1 flex-col overflow-hidden')}>
          <div className="text-2xl font-bold text-[#333333]">知识库更新情况统计</div>
          <ReactECharts option={updateOptions} className="flex-1" />
        </div>
        <div className={cn(cardClass, 'h-[360px] flex-1 flex-col overflow-hidden bg-[url("/imgs/statistic-icon-5.png")] bg-[length:100%_100%] bg-no-repeat')}>
          <div className="text-2xl font-bold text-[#333333]">标签云图</div>
          <ReactECharts option={tagOptions} className="flex-1" />
        </div>
      </div>
    </div>
  )
}

export default Statistic