Echarts图表数据更新方式

Posted on Edited on In

原文摘自陈胜博客

问题表现

页面 echarts 图表 在做一些数据交互的时候会涉及到一些数据的更新。如果只是简单的新数据传递给echarts图表，许多时候我们会发现 旧有的时候依然残留在页面之上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
$(function() {
    var echartOpt = {
        fz: '15',
        color: '#fff'
    };

    var demo = echarts.init(document.getElementById('trade-history'));

    function initDemo(data, obj) {
        var demoOption = {
            tooltip: {},
            legend: {
                data: [],
            },
            calculable: true,
            xAxis: {
                data: ['2007', "2008", "2009", "2010", "2011"],
            },
            yAxis: [{
                type: 'value',
                name: '贸易量（万吨）',
                min: 0,
            }],
            color: ["#3fa7dc", "#ffea38", "#f9852d", "#F10F0F", "#14EE10"],
        };

        var seriesStyle = [{
            barMaxWidth: 10,
            itemStyle: {
                normal: {
                    // borderColor: '#3fa7dc',
                    color: '#3fa7dc'
                }
            },
        }, {
            barMaxWidth: 10,
            itemStyle: {
                normal: {
                    // borderColor: '#ffea38',
                    color: '#ffea38'

                }
            },
        }]

        // 新的图例数据
        var legend = data.map(function (item, index) {
            return item.name
        })
        var newOption = {
            legend: {
                data: legend
            },
            series: data    // 传入的数据
        }

        // 将数据样式 加载到我们的 新数据上面
        newOption.series.forEach(function(item, index) {
            $.extend(true, item, seriesStyle[index])        
        });

        // 新旧数据合并
        $.extend(true, demoOption, newOption)

        demo.setOption(demoOption, true);
    }

    // 假数据 1
    var dataOne = [{
            name: 'A',
            type: 'bar',
            data: [200, 300, 100, 330, 350],
        }]
    // 假数据 2
    var dataTwo = [{
        name: 'A',
        type: 'bar',
        data: [100, 300, 100, 330, 350],
    }, {
        name: 'B',
        type: 'bar',
        data: [200, 100, 400, 300, 600],
    }]

    // 页面初始化
    initDemo(dataOne)

    var toggleBtn = document.querySelector('.toggle')

    // 无用的循环数据使用
    var n = 0
    toggleBtn.addEventListener('click', function () {
        n = (n + 1) % 2
        var data = n === 0 ? dataOne : dataTwo
        initDemo(data)
    })


})