echarts更新数据不重新绘制图表

在使用echarts进行可视化图表的开发时，由于option配置项配置项太多，在进行一些动态操作时我们一般情况下都是去直接更新series里面的数据来更新页面图表的数据。这就产生了一个问题，当series里面的数据条数不相等时，再重新对获取echart实例进行setOption，当更新的数据少于之前数据时，会发现页面回遗留下之前的数据，包括图例。解决办法:给setOption这个方法加上第二个参数true，重新绘制整个图表（默认是false）配置项手册

myChart.setOption(option,true)

下面来举个例子

#myChart{
    width: 600px;
    height: 450px;
    margin: auto;
}
.btn{
    text-align: center;
}

<div id="myChart"></div>
 <div class="btn">
        <button class="origin">原始数据</button>
        <button class="one">一条数据</button>
 </div>

<script>
        const myChart =  echarts.init(document.getElementById("myChart"))
        let option = {
            tooltip:{
                show:true,
                trigger:"item"
            },
            legend:{
                show:true,
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '30%']
            },
            series:[
                {
                    name:"折线图",
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                },
                {
                    name:"柱状图",
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'bar',
                    itemStyle:{//随机颜色
                        color:"rgba("+ Math.floor(Math.random()*256) + ',' +  Math.floor(Math.random()*256) + ',' +Math.floor(Math.random()*256) + ',' +  (Math.random()*10).toFixed(1) +')'
                    }
                }
            ]
        }
        myChart.setOption(option)
         $('.origin').click(function(){
            option.series = [
                {
                    name:"折线图",
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                },
                {
                    name:"柱状图",
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'bar',
                    itemStyle:{//随机颜色
                        color:"rgba("+ Math.floor(Math.random()*256) + ',' +  Math.floor(Math.random()*256) + ',' +Math.floor(Math.random()*256) + ',' +  (Math.random()*10).toFixed(1) +')'
                    }
                }
            ]
            myChart.setOption(option)
        })
        $(".one").click(function(){
            var data = {
                    name:"折线图",
                    data: [720, 832, 501, 934, 590, 730, 800],
                    type: 'line',
                }
                option.series = [data]
                myChart.setOption(option)
        })

在页面的效果如下

可以看到这个当只有一条数据时最初始的第二条数据以及图例还在图表里，在setOption加上第二个参数为true时

$(".one").click(function(){
            var data = {
                    name:"折线图",
                    data: [720, 832, 501, 934, 590, 730, 800],
                    type: 'line',
                }
                option.series = [data]
                myChart.setOption(option,true)
        })

页面效果如下

在这看到图表已经能够重新绘制了