亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue.js+Echarts開發(fā)圖表放大縮小功能

genedna / 735人閱讀

摘要：但是由于過于臃腫，公司決定使用來開發(fā)圖表功能。而我們所開發(fā)的圖表是需要有放大縮小功能，于是在網(wǎng)上找了很久，也沒有找到合適的答案，大部分是通過監(jiān)聽窗口大小改變事件來設(shè)置，然而并不是我們所需要的。

最近使用echarts來開發(fā)某系統(tǒng)的圖表功能，先申明我以前用的ext.js，ext.js對圖表有自己的一套組件，用起來也很方便。但是由于ext.js過于臃腫，公司決定使用echarts來開發(fā)圖表功能。當(dāng)我們使用的時候才悲催的發(fā)現(xiàn)，echart繪制之后，不能隨著容器div的大小而變化。而我們所開發(fā)的圖表是需要有放大縮小功能，于是在網(wǎng)上找了很久，也沒有找到合適的答案，大部分是通過監(jiān)聽窗口大小改變事件來設(shè)置，然而并不是我們所需要的。于是自己用了一點點時間，了解了為何echarts不能重新渲染，原來是在容器div里面設(shè)置了標(biāo)記，每個div容器只能被渲染一次。知道原因之后，就容易了，就寫了一個簡單的demo。希望可以幫到有需要的同學(xué)。
html代碼：
`


    vue+chart
    
    
    




    

        

            

        

        

            
放大

            
縮小

`

js代碼：

            var vm=new Vue({
                el:"#app",
                data:{
                    size:300,
                },
                 computed: {
                    style: function () {
                      return "width:"+this.width+"px;height:"+this.height+"px"
                    }
                  },
                  methods:{
                        add:function(){
                            if(this.size<900){
                                this.size=this.size+50;}
                                else{
                                this.size=900;
                                }

                            },
                        reduce:function(){
                            if(this.size>300){
                            this.size=this.size-50;}
                            else{
                            this.size=300;
                            }
                        }
                  }
            })
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: "ECharts 入門"
            },
            tooltip: {},
            legend: {
                data:["銷量"]
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: "銷量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);
            // 基于準(zhǔn)備好的dom，初始化echarts實例
        vm.$watch("size",function(newVal, oldVal){
            var dom=document.getElementById("panel")
            dom.innerHTML="
";
            var myChart = echarts.init(document.getElementById("main"));
            myChart.setOption(option);
        })

項目github地址https://github.com/qiuquanwu/...

以上方法被棄用,建議使用官方riseze()方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83404.html

相關(guān)文章

  • 前端開發(fā)者常用的9個JavaScript圖表庫

    摘要：使用來呈現(xiàn)圖表。允許用戶在應(yīng)用程序中創(chuàng)建美觀的可復(fù)用的圖表。它是基于創(chuàng)建的，是一個以數(shù)據(jù)為中心的圖表庫，可以改進(jìn)數(shù)據(jù)可視化的效果。非常輕巧，并使用元素來創(chuàng)建很奇特的圖表。是庫中較為古老的圖表庫之一?？偨Y(jié)以上介紹的庫都是高質(zhì)量的圖表庫。 當(dāng)前，數(shù)據(jù)可視化已經(jīng)成為數(shù)據(jù)科學(xué)領(lǐng)域非常重要的一部分。不同網(wǎng)絡(luò)系統(tǒng)中產(chǎn)生的數(shù)據(jù)，都需要經(jīng)過適當(dāng)?shù)目梢暬幚?，以便更好的呈現(xiàn)給用戶讀取和分析。 對任何一個...

    luck 評論0 收藏0

  • vue.js使用echarts一分鐘簡單入門

    摘要：圖表的使用在企業(yè)級軟件中使用越來越普遍，前端開發(fā)人員可以使用常用的開源庫來進(jìn)行圖表展示的開發(fā)，公司最近提出需要豐富系統(tǒng)首頁的內(nèi)容，趁此機會分享一下如何在使用框架下使用確定你需要引入的版本官網(wǎng)地址或者安裝按需引入。 圖表的使用在企業(yè)級軟件中使用越來越普遍，前端開發(fā)人員可以使用常用的echarts開源庫來進(jìn)行圖表展示的開發(fā)，公司最近提出需要豐富系統(tǒng)首頁的內(nèi)容，趁此機會分享一下如何在使用vu...

    venmos 評論0 收藏0

  • vue.js使用echarts一分鐘簡單入門

    摘要：圖表的使用在企業(yè)級軟件中使用越來越普遍，前端開發(fā)人員可以使用常用的開源庫來進(jìn)行圖表展示的開發(fā)，公司最近提出需要豐富系統(tǒng)首頁的內(nèi)容，趁此機會分享一下如何在使用框架下使用確定你需要引入的版本官網(wǎng)地址或者安裝按需引入。 圖表的使用在企業(yè)級軟件中使用越來越普遍，前端開發(fā)人員可以使用常用的echarts開源庫來進(jìn)行圖表展示的開發(fā)，公司最近提出需要豐富系統(tǒng)首頁的內(nèi)容，趁此機會分享一下如何在使用vu...

    chengtao1633 評論0 收藏0

  • vue.js使用echarts一分鐘簡單入門

    摘要：圖表的使用在企業(yè)級軟件中使用越來越普遍，前端開發(fā)人員可以使用常用的開源庫來進(jìn)行圖表展示的開發(fā)，公司最近提出需要豐富系統(tǒng)首頁的內(nèi)容，趁此機會分享一下如何在使用框架下使用確定你需要引入的版本官網(wǎng)地址或者安裝按需引入。 圖表的使用在企業(yè)級軟件中使用越來越普遍，前端開發(fā)人員可以使用常用的echarts開源庫來進(jìn)行圖表展示的開發(fā)，公司最近提出需要豐富系統(tǒng)首頁的內(nèi)容，趁此機會分享一下如何在使用vu...

    SnaiLiu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<