echarts 参考样式

最新推荐文章于 2024-07-20 23:54:17 发布

J.J.J

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量206

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_54030999/article/details/127205661

版权

export const barConfig = barData => {
  let option = {
    tooltip: {
      backgroundColor: "rgba(27, 126, 242, 0.8)",
      borderColor: "rgba(27, 126, 242, 0.8)",
      textStyle: {
        color: "#fff"
      },
      axisPointer: {
        type: "shadow"
      },
      trigger: "axis"
    },
    legend: {
      icon: "circle",
      top: "4%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "20",
      right: "20",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: barData.time,
        axisLabel: {
          formatter: function(val) {
            let num = Number(val.substr(0, 2)) % 2;
            if (num == 0) {
              return val;
            } else {
              return "";
            }
          },
          interval: 0,
          textStyle: {
            //改变xy轴上文字的颜色
            color: "#fff"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#25318c"
          }
        }
      }
    ],
    yAxis: {
      name: barData.unit,
      nameTextStyle: {
        color: "#fff",
        fontSize: 13,
        padding: [0, 0, 0, -50]
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#25318c"
        }
      },
      axisLabel: {
        textStyle: {
          //改变xy轴上文字的颜色
          color: "#fff"
        }
      }
    },
    series: [
      {
        name: "尖",
        type: "bar",
        stack: "Ad",
        color: "#ea3c53",
        emphasis: {
          focus: "series"
        },
        data: barData.epj
      },
      {
        name: "峰",
        type: "bar",
        stack: "Ad",
        color: "#eaa23c",
        emphasis: {
          focus: "series"
        },
        data: barData.epf
      },
      {
        name: "平",
        type: "bar",
        stack: "Ad",
        color: "#4db560",
        emphasis: {
          focus: "series"
        },
        data: barData.epp
      },
      {
        name: "谷",
        type: "bar",
        stack: "Ad",
        color: "#339eee",
        emphasis: {
          focus: "series"
        },
        data: barData.epg
      }
    ]
  };
  return option;
};

export const gaugeConfig = gaugeData => {
  let option = {
    series: [
      {
        type: "gauge",
        radius: "110%",
        center: ["50%", "55%"],
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.3, "#4db560"],
              [0.7, "#eaa23d"],
              [1, "#ea3c52"]
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: "#fff"
          }
        },
        axisTick: {
          distance: -10,
          length: 4,
          lineStyle: {
            color: "#fff",
            width: 2
          }
        },
        splitLine: {
          distance: -10,
          length: 10,
          lineStyle: {
            color: "#fff",
            width: 3
          }
        },
        axisLabel: {
          color: "#fff",
          distance: 15,
          fontSize: 14,
          formatter: function(val) {
            return val != 0 && val != 100 ? val : "";
          }
        },
        detail: {
          valueAnimation: true,
          formatter: "{value} % \n 实时负荷率",
          color: "#fff",
          fontSize: 18
        },
        data: [
          {
            value: gaugeData.sumLoadRaTe,
            detail: {
              offsetCenter: [0, "55%"]
            }
          }
        ]
      }
    ]
  };
  return option;
};