vue3.x & echartsV5.2.1, when i click the [ legend ] which on the chart, Console error: coordSys is undefined

[59637428]

Version

5.2.1

Steps to reproduce

Use a line chart casually in vue3.x,Configure the legend, and click the legend on the chart

What is expected?

the legend i can click and the line can hide or show

What is actually happening?

Uncaught TypeError: coordSys is undefined
render LineView.js:553
progress Chart.js:196
_doProgress task.js:187

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵

[59637428]

this is my code:

            myChart.setOption({
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        coordinateSystem: 'cartesian2d',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        coordinateSystem: 'cartesian2d',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                ]
            });
        },

[pissang]

Try using shallowRef instead of ref on the chart instance

[59637428]

Try using shallowRef instead of ref on the chart instance

This is a test example, in this example I did not use ref

[pissang]

Please provide an example that can reproduce your issue

[echarts-bot[bot]]

@59637428 Please provide a minimum reproducible demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

[59637428]

Please provide an example that can reproduce your issue

<template>
    <a-spin :spinning="loading" :delay="delay">
        <div id="demo-chart" style="width: 1200px;height: 500px;"></div>
    </a-spin>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "page4",
        data() {
            return {
                chart: null,
                option: null,
                loading: true,
                delay: 50,
            }
        },
        created() {
            console.log("created")
        },
        mounted() {
            console.log("mounted")
            this.initCharts();
            let vm = this;
            setTimeout(function () {
                vm.loading = false;
            }, 3000);
        },
        methods: {
            initCharts() {
                let el = document.getElementById('demo-chart');
                this.chart = echarts.init(el);
                this.option = {
                    legend: {
                        data: ['Email']
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'Email',
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }
                    ]
                };
                this.chart.setOption(this.option);
            },
        },
        setup() {

        },

    }
</script>

<style lang="scss" scoped>

</style>

this is the code, thanks

[59637428]

Please provide an example that can reproduce your issue

When I clicked legend for the first time, it can be hide the line, But when I click the second time I want to show the line, , it reports an error:

[pissang]

The chart instance is in your data. It's similar with using ref. It's not necessary and bad for performance because vue will proxy all properties in this chart instance recursively.