echarts icon indicating copy to clipboard operation
echarts copied to clipboard

Published 20 hours ago • verified publisher icon apache

Line disappear when setOption again if using SVG renderer in Safari

Open 100pah opened this issue 5 years ago • 2 comments

Version

4.6.0

Steps to reproduce

See the case in https://jsbin.com/jeceyoveco/edit?html,output

The source code is:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>

  
  

  <h3>Should run on <strong>Safari</strong></h3>
  <button id='btn' style="color: red; font-size: 16px">
  Click me, the BB series will disappear unexpectedly.
  </button>
  <br>

  <div id="main" style="width: 90%; height: 260px; margin-top: 20px">
  </div>
  
  <script type="text/javascript">

    var option = {
        legend: {
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '0',
            right: '1%',
            bottom: '3%',
            width: '100%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.1)'
                }
            }
        },
        yAxis: {
            type: 'value',
            max: 800,
            splitLine: {
                lineStyle: {color: 'rgba(0,0,0,0.1)'}
            }
        },
        series: [
            {
                name: 'CC',
                type: 'line',
                clip: false,
                color: '#4D5054',
                symbol: 'circle',
                lineStyle: {width: 5},
                symbolSize: 7,
                data: [0, 0, 0, 0, 0, 12, 23, 33, 244, 366]
            },
            {
                name: 'BB',
                type: 'line',
                clip: false,
                color: '#10AEB5',
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {width: 5},              
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
                name: 'AA',
                clip: false,
                type: 'line',
                color: '#E83132',
                symbol: 'circle',
                symbolSize: 7,
                lineStyle: {width: 5},              
                data: [10, 40, 60, 99, 110, 140, 200, 500, 768, 999]
            }
        ]
    };

    var chart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});
    chart.setOption(option);

    var btn = document.getElementById('btn');
    btn.onclick = function () {
        chart.setOption({});
    };

    
  </script>

  
</body>
</html>

What is expected?

Do not disappear

What is actually happening?

A line disappear

After the first setOption, the SVG <clipPath> in has id: zr2322-clip-0 zr2322-clip-1 zr2322-clip-2

And the "line" refer them with the id.

After the second setOption, the SVG clipPath in become: zr2322-clip-3 zr2322-clip-4 zr2322-clip-5

But the "line" path still refer zr2322-clip-0 zr2322-clip-1 zr2322-clip-2

100pah avatar Feb 25 '20 09:02 100pah

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 you have posted enough image to demo your request. 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 [email protected]. Please attach the issue link if it's a technical questions.

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

Have a nice day! 🍵

echarts-bot[bot] avatar Feb 25 '20 09:02 echarts-bot[bot]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] avatar Aug 04 '22 21:08 github-actions[bot]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

github-actions[bot] avatar Aug 12 '22 21:08 github-actions[bot]