kanban-vue/src/components/assemblyechart/centerRight/centerRightChart/chart.vue

<template>
    <Echart
      :options="options"
      id="centreRight2Chart1" style="width: 300px; height: 280px;position: absolute; left: 20%;"
    ></Echart>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        // 固定样式数据
        let lineStyle = {
          normal: {
            width: 1,
            opacity: 0.5
          }
        };

        this.options = {
          radar: {
            indicator: newData.indicatorData,
            shape: "circle",
            splitNumber: 5,
            radius: ["0%", "40%"],
            name: {
              textStyle: {
                color: "rgb(238, 197, 102)"
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  "rgba(238, 197, 102, 0.1)",
                  "rgba(238, 197, 102, 0.2)",
                  "rgba(238, 197, 102, 0.4)",
                  "rgba(238, 197, 102, 0.6)",
                  "rgba(238, 197, 102, 0.8)",
                  "rgba(238, 197, 102, 1)"
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(238, 197, 102, 0.5)"
              }
            },
            nameGap: 18
          },
          series: [
            {
              name: "",
              type: "radar",
              lineStyle: lineStyle,
              data: newData.dataRadius,
              symbol: "circle",
              label: {
                show: true,
                offset: [0, 3],
              },
              itemStyle: {
                normal: {
                  color: "#F9713C"
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.1
                }
              }
            },
          ],
          title: {
            text: '工序投产良率分析',
            textStyle: {
              color: '#fff', // 白色字体
              fontSize: 16,
            },
            top: '0%',
            left: 'center' // 垂直居中
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>