ECharts

Question

我有以下图表组件：

<template>
  <div class="gauge-chart">
    <chart :options="options"></chart>
  </div>
</template>

<script>
export default {
  props: {
    chartValue: { type: Number, required: true },
    chartName: { type: String, required: true },
  },
  data: () => ({
    options: {
      series: [
        {
          type: "gauge",
          startAngle: 180,
          endAngle: 0,
          min: 1,
          max: 5,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.25, "#7CFFB2"],
                [0.5, "#58D9F9"],
                [0.75, "#FDDD60"],
                [1, "#FF6E76"],
              ],
            },
          },
          pointer: {
            icon: "arrow",
            offsetCenter: [0, "-30%"],
            itemStyle: {
              color: "auto",
            },
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: "auto",
              width: 1,
            },
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: "auto",
              width: 5,
            },
          },
          title: {
            fontSize: 30,
          },
          data: [
            {
              value: this.chartValue,
              name: this.chartName,
            },
          ],
        },
      ],
    },
  }),
};
</script>

如您所见，我正在尝试将 chartValue 和 chartName 道具分别注入 options.series.data.value 和 options.series.data.name。

属性值来自

<GaugeChart chartName="Sleep" :chartValue="2" />

目前这些值是硬编码的，但最终它们将是动态的。但是它不断抛出以下错误：

"TypeError: Cannot read property 'chartName' of undefined" "TypeError: Cannot read property 'chartValue' of undefined"

我已经完成了两个属性的 colsole.log，它们以“Sleep”和 2 出现。我还对两个属性名称进行了 typeof，它们都以 String 和分别编号。

有人能告诉我哪里错了吗？非常感谢。

Answer 1

您不能在箭头函数内使用 'this' 运算符，因此请将您的数据部分定义为普通函数

<script>
export default {
  props: {
    chartValue: { type: Number, required: true },
    chartName: { type: String, required: true },
  },
  data() {
   return {
    options: {
      series: [
        {
          type: "gauge",
          startAngle: 180,
          endAngle: 0,
          min: 1,
          max: 5,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.25, "#7CFFB2"],
                [0.5, "#58D9F9"],
                [0.75, "#FDDD60"],
                [1, "#FF6E76"],
              ],
            },
          },
          pointer: {
            icon: "arrow",
            offsetCenter: [0, "-30%"],
            itemStyle: {
              color: "auto",
            },
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: "auto",
              width: 1,
            },
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: "auto",
              width: 5,
            },
          },
          title: {
            fontSize: 30,
          },
          data: [
            {
              value: this.chartValue,
              name: this.chartName,
            },
          ],
        },
      ],
    },
  };
 }
};
</script>

Answer 2

您应该按照以下方式使用该道具：

<GaugeChart chart-name="Sleep" chart-value="2" />

Documentation

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase.

ECharts - 如何从道具中注入价值？

ECharts - how to inject value from props?

vue.js