vue-google-chart的GChart组件如何通过按钮点击切换图表类型

问题核心原因 #

• 你定义的newChartType为普通变量，非Vue响应式变量，修改后无法触发组件重新渲染
• 直接操作DOM修改属性对Vue绑定的props无效，必须通过响应式数据流更新参数
• 代码混合了组合式API与选项式API的写法，方法、变量定义逻辑不统一导致调用失效

修复方案 #

直接把图表类型变量改为响应式，点击按钮时修改响应式变量即可，vue-google-chart会自动监听type变更重绘图表，无需手动操作DOM或调用draw方法。

模板代码 #

<GChart
  id="theChart"
  :type="newChartType"
  :data="chartData"
  :options="chartOptions"
  :resize-debounce="500"
  :events="chartEvents"
  ref="gChart"
/>

<!-- 不同类型的切换按钮示例 -->
<rev-button @click="changeChartType('LineChart')">折线图</rev-button>
<rev-button @click="changeChartType('PieChart')">饼图</rev-button>
<rev-button @click="changeChartType('BarChart')">柱状图</rev-button>

逻辑代码 #

import { ref, computed } from 'vue'
import { GChart } from 'vue-google-charts'

export default {
  name: 'RevChartWidget',
  components: {
    GChart
  },
  props: {
    chartData: {
      type: Array,
      required: true
    },
    chartTitle: {
      type: String,
      required: false,
      default: ''
    },
    chartType: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 定义响应式的图表类型变量
    const newChartType = ref('LineChart')
    // 饼图孔大小响应式变量
    const pieHoleSize = ref(0.85)

    // 初始化默认类型
    if (props.chartData[0].length === 2) {
      newChartType.value = 'PieChart'
      if (props.chartType === 'PieChart') {
        pieHoleSize.value = 0.00
      }
    }

    // 切换图表类型的方法
    const changeChartType = (type) => {
      newChartType.value = type
      // 可根据类型动态修改配置
      if (type === 'PieChart') {
        pieHoleSize.value = 0.00
      } else {
        pieHoleSize.value = 0.85
      }
    }

    // 图表配置用计算属性，响应配置变更
    const chartOptions = computed(() => {
      return {
        pieHole: pieHoleSize.value,
        titleTextStyle: { 
          color: '#ffffff', 
          fontSize: 16, 
          fontName: 'Barlow' 
        },
        hAxis: {
          textStyle: {
            color: '#ffffff',
            fontName: 'Barlow',
            fontSize: 12
          },
          slantedText: false,
          minTextSpacing: 1
        },
        vAxis: {
          textStyle: {
            color: '#ffffff',
            fontName: 'Barlow',
            fontSize: 12
          },
          gridlines: {
            count: 0
          },
          slantedText: false,
          minTextSpacing: 1
        },
        legend: {
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
            fontName: 'Barlow',
            bold: true,
            italic: false
          }
        },
        tooltip: {
          textStyle: {
            color: '#000000',
            fontSize: 14,
            fontName: 'Barlow',
            bold: true,
            italic: false
          }
        },
        backgroundColor: 'transparent',
        baselineColor: 'white',
        title: props.chartTitle
      }
    })

    // 图表事件配置
    const gChart = ref(null)
    const chartEvents = {
      select: () => {
        const table = gChart.value.chartObject
        const selection = table.getSelection()          
        const onSelectionMessage = selection.length !== 0 ? 'was selected' : 'was deselected'
        alert(onSelectionMessage)
      }
    }

    return {
      newChartType,
      changeChartType,
      chartOptions,
      chartEvents,
      gChart
    }
  }
}

额外说明 #

• 不需要手动操作DOM调用draw方法，vue-google-chart内部已经做了props变更的监听，type、data、options任一参数响应式更新后都会自动重绘图表
• 所有需要触发视图更新的变量都要用ref/reactive包裹为响应式变量
• 统一使用组合式API定义变量和方法，避免选项式和组合式混用导致的this指向、变量调用问题

内容的提问来源于stack exchange，提问作者hmboettner