fd_dwgz_zhyw_nx/src/views/economicsOperation/homePage/components/normal-radar-chart.vue

<template>
  <div class="chart" :id="id"></div>
</template>

<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";

export default {
  name: "radar-chart",
  componentName: "radar-chart",
  props: {
    // 宽度 默认9.722vh
    width: {
      type: String,
      default: "100%",
    },
    // 高度 默认9.722vh
    height: {
      type: String,
      default: "7.4074vh",
    },
    // 标题
    title: {
      type: Array,
      default: () => ["-", "-"],
    },
    // 值
    value: {
      type: Array,
      default: () => {
        return [
          {
            indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
            data: [
              {
                value: [44200, 14200, 20000, 35000, 50000, 38000],
                name: "风机一号",
              },
            ],
          },
        ];
      },
    },
    showLegend: {
      type: Boolean,
      default: true,
    },
    showTool: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      id: "",
      chart: null,
      lineStyles: [],
      orange: {
        areaStyle: {
          color: "rgba(255,119,0, 0.6)",
        },
        lineStyle: {
          color: "#C92F00",
        },
        itemStyle: {
          color: "#C92F00",
          borderColor: "#C92F00",
          borderWidth: 2,
        },
      },
      blue: {
        areaStyle: {
          color: 'rgba(16,148,255, 0.6)',
        },
        lineStyle: {
          color: "#FFFFFF",
        },
        itemStyle: {
          color: 'rgba(28,153,255, 0.9)',
          borderColor: "rgba(255,255,255, 0.5)",
          borderWidth: 0.5,
        },
      },
      red: {
        areaStyle: {
          color: 'rgba(255, 0, 0, 0.6)',
        },
        lineStyle: {
          color: "#FFFFFF",
        },
        itemStyle: {
          color: 'rgba(255, 0, 0, 0.9)',
          borderColor: "rgba(255,255,255, 0.5)",
          borderWidth: 0.5,
        },
      },
      green: {
        areaStyle: {
          color: 'rgba(0, 255, 0, 0.6)',
        },
        lineStyle: {
          color: "#FFFFFF",
        },
        itemStyle: {
          color: 'rgba(0, 255, 0, 0.9)',
          borderColor: "rgba(255,255,255, 0.5)",
          borderWidth: 0.5,
        },
      },
      white: {
        areaStyle: {
          color: 'rgba(153, 153, 153, 0.6)',
        },
        lineStyle: {
          color: "#FFFFFF",
        },
        itemStyle: {
          color: 'rgba(153, 153, 153, 0.9)',
          borderColor: "rgba(255,255,255, 0.5)",
          borderWidth: 0.5,
        },
      },
    };
  },
  methods: {
    renderValue() {
      let result = [];
      this.value.forEach((value, index) => {
        result.push({
          name: this.title[index],
          type: "radar",
          data: value.data,
        });
      });
      return result;
    },
    initChart() {
      let chart = echarts.init(this.$el);
      let maxValue = -1;
      this.lineStyles = [this.blue, this.orange,this.red,this.green,this.white];
      if (this.value.length > 0)
        this.value[0].data.forEach((item, index) => {
          item.value.forEach((value) => {
            if (value > maxValue) {
              maxValue = value;
            }
          });
          item.areaStyle =
              this.lineStyles[index % this.lineStyles.length].areaStyle;
          item.lineStyle =
              this.lineStyles[index % this.lineStyles.length].lineStyle;
          item.itemStyle =
              this.lineStyles[index % this.lineStyles.length].itemStyle;
        });
      if (this.value[1] && this.value[1].data && this.value[1].data.length> 0) {
        this.value[1].data.forEach((item, index) => {
          item.value.forEach((value) => {
            if (value > maxValue) {
              maxValue = value;
            }
          });
          item.areaStyle =
              this.lineStyles[1].areaStyle;
          item.lineStyle =
              this.lineStyles[1].lineStyle;
          item.itemStyle =
              this.lineStyles[1].itemStyle;
        });
      }
      if (this.value[2] && this.value[2].data && this.value[2].data.length> 0) {
        this.value[2].data.forEach((item, index) => {
          item.value.forEach((value) => {
            if (value > maxValue) {
              maxValue = value;
            }
          });
          item.areaStyle =
              this.lineStyles[2].areaStyle;
          item.lineStyle =
              this.lineStyles[2].lineStyle;
          item.itemStyle =
              this.lineStyles[2].itemStyle;
        });
      }
      if (this.value[3] && this.value[3].data && this.value[3].data.length> 0) {
        this.value[3].data.forEach((item, index) => {
          item.value.forEach((value) => {
            if (value > maxValue) {
              maxValue = value;
            }
          });
          item.areaStyle =
              this.lineStyles[3].areaStyle;
          item.lineStyle =
              this.lineStyles[3].lineStyle;
          item.itemStyle =
              this.lineStyles[3].itemStyle;
        });
      }
      if (this.value[4] && this.value[4].data && this.value[4].data.length> 0) {
        this.value[4].data.forEach((item, index) => {
          item.value.forEach((value) => {
            if (value > maxValue) {
              maxValue = value;
            }
          });
          item.areaStyle =
              this.lineStyles[4].areaStyle;
          item.lineStyle =
              this.lineStyles[4].lineStyle;
          item.itemStyle =
              this.lineStyles[4].itemStyle;
        });
      }
      maxValue *= 1.5;

      let indicator = [];
      if (this.value.length > 0)
        this.value[0].indicator.forEach((item) => {
          indicator.push({ name: item, max: maxValue });
        });

      let option = {
        grid: {
          left: 150,
          right: 150,
          bottom: 150,
          top: 150,
        },
        tooltip: {
          show: this.showTool,
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.4)",
          borderColor: "#606769",
          textStyle: {
            color: "#f8f8ff",
            fontSize: util.vh(16),
          },
        },
        legend: {
          show: false,
          bottom: 16,
          inactiveColor: "#606769",
          textStyle: {
            fontSize: 12,
            color: "#f8f8ff",
          },
        },
        radar: [
          // 最低层 80
          {
            radius: "70%",
            center: ["50%", "50%"],
            splitNumber: 1,
            nameGap: "16",
            name: {
              textStyle: {
                color: "#f8f8ff",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#606769",
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "#606769",
              },
            },
            splitArea: {
              areaStyle: {
                color: "transparent",
              },
            },
            itemStyle: {
              color: "#C92F00",
              borderColor: "#C92F00",
              borderWidth: 0.5,
            },
            indicator: indicator,
          },
          // 次外层 70 - 80
          {
            radius: ["60%", "70%"],
            center: ["50%", "50%"],
            startAngle: 90,
            splitNumber: 2,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#606769",
                shadowBlur: 1,
                shadowColor: "#fff",
                shadowOffsetX: 0.5,
                shadowOffsetY: 1,
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "#606769",
                shadowColor: "#fff",
                shadowBlur: 0,
                shadowOffsetX: 0.5,
                shadowOffsetY: 0.5,
              },
            },
            splitArea: {
              areaStyle: {
                color: "transparent",
              },
            },
            indicator: indicator,
          },
          // 渐变层 40 - 70
          {
            radius: ["35%", "60%"],
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#606769",
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "#606769",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: "transparent", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0E235A", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            indicator: indicator,
          },
          // 渐变层 0 - 40
          {
            radius: ["0%", "35%"],
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#606769",
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "#606769",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: "transparent", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0F245E", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            indicator: indicator,
          },
          // 内层 0 - 50
          {
            radius: "35%",
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#606769",
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "#606769",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: "transparent",
              },
            },
            indicator: indicator,
          },
          // 内层 0 - 45
          {
            radius: "35%",
            center: ["50%", "50%"],
            splitNumber: 1,
            name: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#606769",
              },
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "#606769",
              },
            },
            splitArea: {
              areaStyle: {
                shadowBlur: 4,
                color: "transparent",
              },
            },
            indicator: indicator,
          },
        ],
        series: this.renderValue(),
      };

      chart.setOption(option);
    },
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.style.width = this.width;
      this.$el.style.height = this.height;
      this.initChart();
    });
  },
  updated() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
}
</style>