push

lib/component/echarts/components/chart/radar/BaseRadar.vue

@@ -0,0 +1,43 @@
+<!-- @format -->
+
+<template>
+  <div class="base-radar" id="baseradar" ref="BaseRadarRef"></div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { init } from 'echarts';
+
+  export default defineComponent({
+    name: 'BaseRadar',
+    props: {},
+    data() {
+      return {
+        options: null,
+      };
+    },
+    created() {},
+    mounted() {},
+    methods: {
+      setOption(obj) {
+        this.options = obj;
+      },
+      getOption() {
+        return this.options;
+      },
+      renderChart() {
+        if (!this.chartbox) {
+          this.chartbox = init(this.$refs.BaseRadarRef, null, { renderer: 'svg' });
+        }
+        this.chartbox.clear();
+        let option = this.getOption();
+        this.chartbox.setOption(option, { notMerge: false });
+      },
+    },
+  });
+</script>
+<style lang="less">
+  .base-radar {
+    height: 100%;
+    width: 100%;
+  }
+</style>

lib/component/echarts/components/chart/radar/CustomizedRadar.vue

@@ -0,0 +1,141 @@
+<!-- @format -->
+
+<script>
+  import { defineComponent } from 'vue';
+  import BaseRadar from './BaseRadar.vue';
+
+  export default defineComponent({
+    name: 'BasicRadar',
+    extends: BaseRadar,
+    props: {
+      series: {
+        type: Array,
+        required: true,
+      },
+      indicator: {
+        type: Array,
+        required: true,
+      },
+      radius: {
+        type: String,
+        default: '75%',
+      },
+    },
+    data() {
+      return {};
+    },
+    computed: {},
+    created() {},
+    mounted() {
+      let optionData = this.optionHandle();
+
+      this.setOption(optionData);
+      this.renderChart();
+    },
+    methods: {
+      optionHandle() {
+        let _this = this;
+        let index = 0;
+        let color = [
+          '#0075FF',
+          '#7a7b82',
+          '#B2BCF3',
+          '#655ADC',
+          '#D04CFF',
+          '#F14A4A',
+          '#EB9260',
+          '#E8EB60',
+          '#3FE280',
+          '#3FC5E2',
+        ];
+        let richObj = {
+          top: {
+            color: '#10C8D8',
+            fontFamily: 'Microsoft YaHei',
+            fontSize: 20,
+            fontWeight: 500,
+            align: 'left',
+            padding: [0, 0, 5, 10],
+          },
+          // 属性下部分样式
+          end: {
+            color: 'rgba(255, 255, 250, 0.65)',
+            fontFamily: 'Microsoft YaHei',
+            fonSize: 12,
+            fontWeight: 400,
+            align: 'center',
+          },
+        };
+        for (let i = 0; i < color.length; i++) {
+          var obj = { height: 6, width: 6, align: 'center', backgroundColor: color[i] };
+          richObj['rect' + (i + 1)] = obj;
+        }
+        let option = {
+          animationDuration: 300,
+          animationEasing: 'linear',
+          textStyle: {
+            color: '#fff',
+            fontFamily: 'Microsoft YaHei',
+          },
+          radar: {
+            radius: '70%',
+            splitNumber: 2, // 雷达图圈数设置
+            axisName: {
+              formatter: (params) => {
+                // 使用formatter可以将结果进行重定义，同时可以使用语法`{|}`来引入富文本样式
+                // debugger;
+                // console.log(params);
+                let a = params.split(',')[0];
+                let b = params.split(',')[1];
+                // `${0}px`
+                index++;
+                var rect = 'rect' + index;
+                return `{top|${a}}\n{${rect}|} {end|${b}}`;
+                // return '{top|'+a+'}' + '\n' + '{rect|}{end|'+b+'}'
+              },
+              // 富文本样式定义
+              rich: richObj,
+            },
+            // 设置雷达图坐标轴线
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255, 255, 205, 0.05)',
+              },
+            },
+            splitArea: {
+              show: false,
+              areaStyle: {
+                color: 'rgba(255,0,0,0)', // 图表背景的颜色
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 2,
+                color: ['rgba(255, 255, 255, 0.1)', 'rgba(6, 235, 238, 0.1)'],
+                // color: 'rgba(255, 255, 255, 0.1)', // 设置网格的颜色
+              },
+            },
+            indicator: _this.indicator,
+          },
+          series: [
+            {
+              name: 'Budget vs spending',
+              type: 'radar',
+              symbol: 'none',
+              lineStyle: {
+                color: '#06EBEE',
+                width: 2,
+              },
+              areaStyle: {
+                color: 'rgba(6, 235, 238, 0.1)',
+              },
+              data: _this.series,
+            },
+          ],
+        };
+        return option;
+      },
+    },
+  });
+</script>