简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Literale Kapselung von Echarts-Komponenten. Warum schlägt sie während der Initialisierung fehl?
高洛峰
高洛峰 2017-07-05 11:09:11
0
1
1240
<!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>

Bitte fragen Sie nach der richtigen Methode zum Schreiben, Initialisieren und Aktualisieren von Datenmethoden

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

Antworte allen(1)
迷茫
迷茫2017-07-05 11:11:11 1 Etage 
        this.cdata = data;
        this.chart.setOption(this.options);
        
        这里是给this.cdata重新赋值了，并不是改变了当前引用位置的元素，所以不会同步共享
        
        
        this.options.series.data = data;
        this.chart.setOption(this.options);
Wie +1
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！