时间戳

首页 > 解决方案 > ECharts - 如何从道具中注入价值？

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

问题描述

我有以下图表组件：

<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：无法读取未定义的属性‘chartName’”“TypeError：无法读取未定义的属性‘chartValue’”

我已经完成了这两个属性的 colsole.log，它们显示为“Sleep”和 2。我还对两个属性名称进行了 typeof，它们分别显示为 String 和 Number。

有人可以告诉我哪里出错了吗？提前谢谢了。

标签： vue.jsecharts

解决方案

您不能在箭头函数中使用“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>

推荐阅读