import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text, Input } from "@tarojs/components";
import { Popup, Progress, Slider } from "@antmjs/vantui";
import { useRef } from "react";
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
import echarts from "@/utils/echarts.min.js";
import "./index.less";

interface Props {
  Electricity: any;
  matrixElectricity: any;
  facialMaskConnectStatus: any;
}

function Index() {
  const echartsRef = useRef<EchartsHandle>(null);
  const option: EChartOption = {
    grid: {
      // 让图表占满容器
      top: "28rpx",
      left: "30rpx",
      right: "35rpx",
      bottom: "38rpx",
    },
    title: {
      left: 'center',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      splitLine: {
        show: true,
      },
      data: ['6.17', '6.18', '6.19', '6.20', '6.21', '6.22', '6.23'],
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLabel: {
        fontSize: 9
      }
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        type: 'line',
        itemStyle: {
          color: 'rgb(168, 222, 244)'
        },
        symbolSize: 0,
        label: {
          show: true,
          distance: 8,
          formatter: function (params) {
            return params.value + '级';
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(220, 240, 248)'

            },
            {
              offset: 1,
              color: 'rgb(248, 253, 255)'
            }
          ])
        },
        data: [5, 3, 4, 6, 3, 4, 3],
      }
    ]
  };

  return (
    <Block>
      <View className='box'>
        <Echarts
          echarts={echarts}
          option={option}
          ref={echartsRef}
          // isPage={false}
          // style自定义设置echarts宽高
          style={{ width: "100%", height: "260rpx" }}
        />
      </View>
    </Block>
  );
}

export default Index;
