echarts 渲染图表出错 Cannot read properties of undefined (reading ‘$echarts‘)

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading '$echarts')"

 

报错的原因是没能指向 echarts。

<script>
export default {
  name: '',
  components: {},
  props: {
    id: {
      type: String,
      default: 'radar3',
    },
    width: {
      type: String,
      default: '100vw',
    },
    height: {
      type: String,
      default: '50vh',
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {
    //
  },
  mounted() {
    //
    this.myCharts();
  },
  methods: {
    myCharts() {
      const myChart = this.$echarts.init(document.getElementById(this.id));

      const data = [80, 70, 30, 85, 25];
      const indicatorname = [
        '政治品德修养',
        '社会发展能力',
        '美劳素质拓展',
        '身心健康发展',
        '学业发展能力',
      ];
      const maxdata = [100, 100, 100, 100, 100];

      function contains(arrays, obj) {
        let i = arrays.length;
        while (i--) {
          if (arrays[i] === obj) {
            return i;
          }
        }
        return false;
      }

      const indicator = [];
      for (let i = 0; i < indicatorname.length; i++) {
        indicator.push({
          name: indicatorname[i],
          max: maxdata[i],
        });
      }

      function innerdata(i) {
        const innerData = [];
        for (let j = 0; j < data.length; j++) {
          innerData.push(100 - 20 * i);
        }
        return innerData;
      }

      const that = this;       // 1.重新指向

      const optionData = getData(data);

      function getData(Data) {
        const res = {
          series: [
            {
              type: 'radar',
              symbolSize: 10,
              symbol: 'circle',
              areaStyle: {
                color: '#39B2FF',
                opacity: 0.3,
              },
              lineStyle: {
                color: that.$echarts.graphic.LinearGradient(   // 2.指向
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#00A2FF',
                    },
                    {
                      offset: 1,
                      color: '#0060FF',
                    },
                  ],
                  false,
                ),
                width: 3,
              },
              itemStyle: {
                color: '#fff ',
                borderColor: that.$echarts.graphic.LinearGradient(   //3. 指向
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#00DEFF',
                    },
                    {
                      offset: 1,
                      color: '#1598FF',
                    },
                  ],
                  false,
                ),
                borderWidth: 4,
                opacity: 1,
              },
              label: {
                show: false,
              },
              data: [
                {
                  value: Data,
                },
              ],
              z: 100,
            },
          ],
        };
        for (let i = 0; i < Data.length; i++) {
          res.series.push({
            type: 'radar',
            data: [
              {
                value: innerdata(i),
              },
            ],
            symbol: 'none',
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              color: '#fff',
            },
            areaStyle: {
              color: '#fff',
              shadowColor: 'rgba(14,122,191,0.15)',
              shadowBlur: 30,
              shadowOffsetY: 20,
            },
          });
        }
        return res;
      }

      const option = {
        backgroundColor: '#fff',
        tooltip: {
          formatter() {
            let html = '';
            for (let i = 0; i < data.length; i++) {
              html += `${indicatorname[i]} : ${data[i]}%<br>`;
            }
            return html;
          },
        },
        radar: {
          indicator,
          splitArea: {
            show: true,
            areaStyle: {
              color: '#fff',
              shadowColor: 'rgba(14,122,191,0.19)',
              shadowBlur: 30,
              shadowOffsetY: 20,
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          name: {
            textStyle: {
              rich: {
                a: {
                  fontSize: '17',
                  color: '#333',
                  align: 'left',
                  lineHeight: '30',
                  fontWeight: 'bold',
                },
                b: {
                  fontSize: '15',
                  color: '#666',
                  align: 'left',
                },
              },
            },

            formatter(params, index) {
              const i = contains(indicatorname, params);
              const percent = (data[i] / 100) * 100;
              // return "{a|" + percent + "%}\n" + "{b|" + params + "}";
              return `{a|${percent}%}\n"{b|${params}}`;
            },
          },
        },
        series: optionData.series,
      };
      myChart.setOption(option);
    },
  },
};
</script>