flossom-miniapp/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx

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);
    function generateColorArray(startColor, endColor, steps) {
        var startRGB = hexToRgb(startColor);
        var endRGB = hexToRgb(endColor);
        var colors = [];
        for (var i = 0; i < steps; i++) {
            var r = interpolate(startRGB.r, endRGB.r, steps, i);
            var g = interpolate(startRGB.g, endRGB.g, steps, i);
            var b = interpolate(startRGB.b, endRGB.b, steps, i);
            colors.push(rgbToHex(r, g, b));
        }
        return colors;
    }

    function hexToRgb(hex) {
        var bigint = parseInt(hex.slice(1), 16);
        var r = (bigint >> 16) & 255;
        var g = (bigint >> 8) & 255;
        var b = bigint & 255;
        return { r: r, g: g, b: b };
    }

    function rgbToHex(r, g, b) {
        return (
            "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
        );
    }

    function interpolate(start, end, steps, count) {
        return start + ((end - start) / steps) * count;
    }

    const startColor = "#FFFF00"; // 黄色
    const endColor = "#FF0000"; // 红色
    const steps = 80; // 80个颜色


const colors = generateColorArray(startColor, endColor, steps);
const xList = [...new Array(37).fill(0).map((item, key) => key)];
const seriesData = [
    ...xList.map((item) => {
        return Math.random() * 80;
    }),
];
  // let seriesData=[
  //   1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
  //   1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
  //   1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,8,5,1,2,3,
  //   1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  //   ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
  // ]
  // console.log(seriesData,'seriesData',xList);
  
   const option: EChartOption ={
    grid: {
      // 让图表占满容器
      top: "10rpx",
      left: "45rpx",
      right: "28rpx",
      bottom: "17rpx",
    },
            xAxis: {
              type: "category",
              data: [...xList],
              axisLabel: {
                  interval: 5,
                  formatter: function (value, index) {
                    console.log(value,'查看');
                    
                      return value * 10 + 's';
                  },
                  textStyle: {
                    color: '#999999', // 文字颜色
                    fontSize: 8 // 文字大小
                },
            },
            axisTick: {
                // alignWithLabel: true,
                show: false,
                interval: 9,
            },
            // axisLine: {
            //     show: false,
            // },
        },
        yAxis: [
            {
                min: 0,
                max: 80,
                splitNumber: 10,
                axisLabel: {
                    formatter: function (value, index) {
                        const num = value / 10 + 1
                        return num === 9 ? '' : num + '级';
                    },
                    textStyle: {
                        color: '#999999', // 文字颜色
                        fontSize: 8 // 文字大小
                    },
                },
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
                        type: 'dashed'
                    },
                }
            },
        ],
        series: [

            {
                barCategoryGap: '0%',
                data: seriesData,
                type: "bar",
                // barWidth: 15,
                gapWidth: "0%",
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var value = params.data;
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: colors[parseInt(value)], // 红色
                                },
                                {
                                    offset: 1,
                                    color: colors[0], // 黄色
                                },
                            ]);;
                        },
                    },
                },
            },
        ],
    };
    let arr = [2, 3, 4, 5, 6, 7]
    return (
        <Block>
            <Echarts
                echarts={echarts}
                option={option}
                ref={echartsRef}
                // isPage={false}
                // style自定义设置echarts宽高
                //   style={{ width: "100%", height: "100%" }}
                style={{ width: "630rpx", height: "260rpx" }}
            />

            {/* <View className="box">
        <Echarts
          echarts={echarts}
          option={option}
          ref={echartsRef}
          // isPage={false}
          // style自定义设置echarts宽高
          style={{ width: "630rpx", height: "240rpx" }}
        />
        
      </View> */}


        </Block>
    );
}

export default Index;