1111111

import styles from './index.less';
import type { EChartsOption } from 'echarts';
import Echarts from './echarts';
import DashBoard, { NoTimeBaseCard } from '@/components/DashBoard';//承载echarts图形的组件


const welderVisual = () => {
     const [options, setOptions] = useState<EChartsOption>({});              //折线图需要
     const [pieoptions, pieChartOptions] = useState<EChartsOption>({});    //饼图需要

     //Echats图形设置（折线图）
  const getEcharts = async () => {
    setOptions({
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: ['7:00','9:00','11:00','13:00','15:00','17:00','19:00'],    //x轴的数据
      },
      yAxis: {
        type: 'value',
        min: 0,      // 设置Y轴最小值为0
        max: 250,    // 设置Y轴最大值为250
        interval: 50 // 设置刻度间隔为50
      },
      legend: {      //设置图例位置。默认居中，不需要操作
        //show:true,
        // orient: 'vertical',
        // right:'5%'
      },
      grid: {        //设置图框内折线图比例
        top: '8%',
        bottom: '10%',
        left:  '50px',
        right: '30px',
      },
      tooltip: {           //悬停在图表上时显示的信息框
        trigger: 'axis',   //触发工具提示的方式，这里设置为 'axis'，表示当鼠标悬停触发
        formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}'
      },
      //折线分类及折现名称设置
      series: [
        {
          name: '电流(A)',     
          data: [5,5,5,5,5,5,5],    
          type: 'line',  //表示图表类型为折线图
          smooth: true,   //表示启用平滑曲线
          symbolSize: 0, // 拐点大小
          color: '#96ECE3',
        },
        {
          name: '电压(V)',
          data: [220,220,220,220,220,220,220],
          type: 'line',
          smooth: true,
          symbolSize: 0, // 拐点大小
          color: '#597EF7',
        },
      ],
    });

     // 饼图的配置选项
    pieChartOptions({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['开机', '待机', '作业', '关机'],
        // itemWidth: 5,   // 自定义图例项的宽度
        // itemHeight: 3,  // 自定义图例项的高度
      },
      series: [
        {
          //name: 'z',
          type: 'pie',
          radius: '100%',
          data: [
            { value: 30 ,name:'开机',itemStyle: { color: '#00ff66' }},
            { value: 13 ,name:'待机',itemStyle: { color: '#00cc66' }},
            { value: 17 ,name:'作业',itemStyle: { color: '#009966' }},
            { value: 20 ,name:'关机',itemStyle: { color: '#006666' }},
          ],
          //鼠标悬停阴影
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });
   }

    return(
        <PageContainer className={styles['globle']}>
            <Row>

            <Col span={18}>
              <DashBoard        //载体         
                title={'设备状态分布图'}
                options={pieoptions}
                height={220}                         //整体大小           
                onParamsChange={getEcharts}
              />
            </Col>
          </Row>
           <Row>
        <Col span={14} className={styles['']}>

          <DashBoard            //载体
            title={'电流电压折线图'}
            options={options}
            height={360}                         //整体大小
            onParamsChange={getEcharts}
          />
        </Col>
        <Col span={9} className={styles['weldermonitor_v']}>异常事件列表</Col>
      </Row>
    </PageContainer>