内容提交

longyvfengyun

2023-11-17 3bb931d4eb57fec4a857c9dd0b11f9643c3506e5

 src/components/echarts/options/getNormalBar.js

@@ -1,6 +1,114 @@
const getNormalBar = ()=>{
  return {
import getMax from "./tools/getMax";
import getMin from "./tools/getMin";

const getNormalBar = (data)=>{
  const defaultOption = {
    minRatio: 0,
    maxRatio: 1.2,
    grid: {
      top: '15%',
      right: '3%',
      left: '10%',
      bottom: '12%'
    },
    min: 0,
    max: 0,
    maxColor: "#FF0000",
    minColor: "#35f10a",
    normalColor: "rgb(24, 166, 253)"
  };
  let option = {...defaultOption, ...data};
  return {
    option,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: option.grid,
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: {
        color: '#e2e9ff',
        fontSize: 14
      },
    },
    yAxis: {
      type: 'value',
      min(data) {
        const min =data.min;
        if(isNaN(min)) {
          return 0;
        }else {
          return min * option.minRatio;
        }
      },
      max(data) {
        const max = data.max;
        if(isNaN(max)) {
          return 1;
        }else {
          return (max * option.maxRatio).toHold(0);
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    },
    title: {
      show: true,
      text: "最大值=0;最小值=0;平均值=0",
      x: "center",
      textStyle: {
        color: "#FFFFFF",
        fontSize: "14",
      },
    },
    series: [
      {
        name: "",
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        itemStyle: {
          color(cData) {
            if(option.max === Number(cData.data[1])) {
              return option.maxColor;
            }else if(option.min === Number(cData.data[1])) {
              return option.minColor;
            }else {
              return option.normalColor;
            }
          }
        },
        label: {
          show: true,
          position: "top",
          color: "#FFFFFF"
        }
      }
    ],
  }
}