javascript - 字面量方式封装echarts组件,为什么初始化的时候失败-PHP中文网问答

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script>
    <style>
        #chart {
            width: 600px;
            height: 400px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
    </style>
    <script>
        var ChartUtils = {
            cdata:[5, 20, 36, 10, 10, 20],
            options:{
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: this.cdata
                }]
            },
            init: function (id) {
                var el = document.getElementById(id);
                this.chart = echarts.init(el);
                console.log(this.cdata);
                this.chart.setOption(this.options);
            },
            update:function (data) {
                this.cdata = data;
                this.chart.setOption(this.options);
            }
        };

        function btn1() {
            ChartUtils.init("chart");
        }

        function btn2() {
            ChartUtils.update([1, 2, 3, 4, 5, 6]);
        }
    </script>
</head>
<body>
<p id="chart"></p>
<button id="btnInit" onclick="btn1()">初始化</button>
<button id="btnUp" onclick="btn2()">更新表</button>

</body>
</html>

求正确写法,初始化和更新数据方法

this.cdata = data; this.chart.setOption(this.options); 这里是给this.cdata重新赋值了，并不是改变了当前引用位置的元素，所以不会同步共享 this.options.series.data = data; this.chart.setOption(this.options);