简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Encapsulation littérale des composants Echarts, pourquoi échoue-t-elle lors de l'initialisation?
高洛峰
高洛峰 2017-07-05 11:09:11
0
1
1239
<!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>

Veuillez demander la manière correcte d'écrire, d'initialiser et de mettre à jour les méthodes de données

高洛峰
高洛峰

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

répondre à tous(1)
迷茫
迷茫2017-07-05 11:11:11 1 plancher 
        this.cdata = data;
        this.chart.setOption(this.options);
        
        这里是给this.cdata重新赋值了，并不是改变了当前引用位置的元素，所以不会同步共享
        
        
        this.options.series.data = data;
        this.chart.setOption(this.options);
Comme +1
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！