在运行时更改元素属性

Question

我有一个图表组件，我的工作是制作一个按钮来更改它的类型（例如，将列更改为饼图），但我不知道如何在按钮单击事件中更改它。这是组件的结构（想法是在按下具有 ChangeType id 的按钮时更改 :series-defaults-type）

<template>
    <div style="width: 100%;overflow: overlay;border-radius: 20px;">
        <button id="changeType" @click="changeType()">Change</button>
        <chart-more-option :kpiName="'EquipmentRetirementForecast'" v-if="showMoreOptions"/>
       <chart :title-text="'Equipment Retirement Forecast'"
              :title-color="'#FFF'"
              :title-font="'openSans'"
              :chart-area-background="'#1B1534'"
              :legend-visible="false"
              :series-defaults-type= "'column'"
              :series="series"
              :category-axis="categoryAxis"
              :axis-defaults-color="'#FFF'"
              :axis-defaults-labels-rotation-angle="'30'"
              :value-axis="valueAxis"
              :tooltip="tooltip"
              :theme="'sass'"
              :zoomable-mousewheel="true">
        </chart>
    </div>
</template>

<script>
import { Chart } from '@progress/kendo-charts-vue-wrapper';
import ChartMoreOption from '../ChartMoreOption';

export default {
    name: 'EquipmentRetirementForecast',
    components: {
        'chart': Chart,
        ChartMoreOption
        
    },
    props:  {
        fetchData: {
            type: Boolean,
            default: false
        },
        showMoreOptions: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
      labelAlign(){
        var c = this.$refs.chart
        c.updateWidget();
      }
    },
    computed:{
        requestBody(){
            return this.$store.getters['usersession/getTopologyRequestBody']
        },
        series(){            
            return this.$store.getters['riskmanagement/getRetirementForecastSeries']
        },
        categoryAxis(){            
            return this.$store.getters['riskmanagement/getRetirementForecastCategoryAxis']
        },
    },
    data: function() {
        return {
            valueAxis: [{
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                },
                labels: {
                    rotation: "auto"
                }
            }],

            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #",
            },

        }
    },
    mounted(){   
        if(this.fetchData){     
            this.$store.dispatch("riskmanagement/FetchRetirementForecastData",this.requestBody).then(()=>{

            });
        }
    },
    methods: {
        changeType(){
            //code goes here
        }
    }
}
</script>
<style src="../style-dashboard.scss" lang="scss" scoped />

这是我需要更改的图表：

手动将 :series-defaults-type 更改为饼图，它有效，但我需要在单击按钮时进行更改，如下所示：

Answer 1

添加一个 data 属性并为其指定默认值 'column'，例如将其命名为 chartType。然后在 changeType() 中添加 this.chartType = 'pie'。并将 :series-defaults-type= "'column'" 更改为 :series-defaults-type= "chartType".

另外请记住不要对硬编码的属性值使用 :。所以 :chart-area-background="'#1B1534'" 应该是 chart-area-background="#1B1534".

在运行时更改元素属性

Change element prop in runtime

javascript

vue.js

vuejs2

kendo-ui

vuejs3