成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

genedna / 668人閱讀

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

最近使用echarts來(lái)開(kāi)發(fā)某系統(tǒng)的圖表功能，先申明我以前用的ext.js，ext.js對(duì)圖表有自己的一套組件，用起來(lái)也很方便。但是由于ext.js過(guò)于臃腫，公司決定使用echarts來(lái)開(kāi)發(fā)圖表功能。當(dāng)我們使用的時(shí)候才悲催的發(fā)現(xiàn)，echart繪制之后，不能隨著容器div的大小而變化。而我們所開(kāi)發(fā)的圖表是需要有放大縮小功能，于是在網(wǎng)上找了很久，也沒(méi)有找到合適的答案，大部分是通過(guò)監(jiān)聽(tīng)窗口大小改變事件來(lái)設(shè)置，然而并不是我們所需要的。于是自己用了一點(diǎn)點(diǎn)時(shí)間，了解了為何echarts不能重新渲染，原來(lái)是在容器div里面設(shè)置了標(biāo)記，每個(gè)div容器只能被渲染一次。知道原因之后，就容易了，就寫(xiě)了一個(gè)簡(jiǎn)單的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 入門(mén)"
            },
            tooltip: {},
            legend: {
                data:["銷(xiāo)量"]
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: "銷(xiāo)量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);
            // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        vm.$watch("size",function(newVal, oldVal){
            var dom=document.getElementById("panel")
            dom.innerHTML="
";
            var myChart = echarts.init(document.getElementById("main"));
            myChart.setOption(option);
        })

項(xiàng)目github地址https://github.com/qiuquanwu/...

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83404.html

相關(guān)文章

  • 前端開(kāi)發(fā)者常用的9個(gè)JavaScript圖表庫(kù)

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

    luck 評(píng)論0 收藏0

  • vue.js使用echarts一分鐘簡(jiǎn)單入門(mén)

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

    venmos 評(píng)論0 收藏0

  • vue.js使用echarts一分鐘簡(jiǎn)單入門(mén)

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

    chengtao1633 評(píng)論0 收藏0

  • vue.js使用echarts一分鐘簡(jiǎn)單入門(mén)

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

    SnaiLiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<