vue.js+Echarts開發圖表放大縮小功能

genedna 發布于2019-08-20 17:06 / 658人閱讀

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

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

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);
            // 基于準備好的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()方法

GPU云服務器云服務器 echarts 圖表放大縮小動畫放大縮小圖片放大縮小html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83404.html

前端開發者常用的9個JavaScript圖表庫

摘要：使用來呈現圖表。允許用戶在應用程序中創建美觀的可復用的圖表。它是基于創建的，是一個以數據為中心的圖表庫，可以改進數據可視化的效果。非常輕巧，并使用元素來創建很奇特的圖表。是庫中較為古老的圖表庫之一。總結以上介紹的庫都是高質量的圖表庫。當前，數據可視化已經成為數據科學領域非常重要的一部分。不同網絡系統中產生的數據，都需要經過適當的可視化處理，以便更好的呈現給用戶讀取和分析。對任何一個...

luck 2019-08-22 11:21 評論0 收藏0
vue.js使用echarts一分鐘簡單入門

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

venmos 2019-08-29 16:17 評論0 收藏0
vue.js使用echarts一分鐘簡單入門

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

chengtao1633 2019-08-23 10:43 評論0 收藏0
vue.js使用echarts一分鐘簡單入門

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

SnaiLiu 2019-08-02 11:09 評論0 收藏0