Echarts组件使用props传递参数 不动态刷新

vue3+setup语法糖+echarts

1. 需要使用watch属性，监测到数据

import * as echarts from 'echarts';
import { watch } from 'vue';
import { onMounted, reactive } from 'vue';
let props = defineProps({
    datax: {
        type: Array,
        default: () => ['0', '0', '0', '0', '0', '0']
    },
    datay: {
        type: Array,
        default: () => ['0', '0', '0', '0', '0', '0']
    }
})
const { proxy } = getCurrentInstance()
var zhuRef = ref(null)
var option = ref()
let setOption = () => {
    option.value = {
        xAxis: {
            // ....
        },
        yAxis: {
            name: proxy.name,
        },

        series: [
            {
                data: proxy.datay,
                type: 'bar'
            }
        ],

    };
}
const init = () => {
    var myChart = echarts.init(zhuRef.value);
    setOption()
    option.value && myChart.setOption(option.value, true);
    window.onresize = function () {
        myChart.resize();
    };
}
onMounted(() => {
    setTimeout(() => {
        init()
    })
})
watch(() => proxy.datay, () => {
    init()
})

</script>