vue.js+Echarts开发图表放大缩小功能

genedna 发布于2019-08-20 17:06 / 570人阅读

摘要：但是由于过于臃肿，公司决定使用来开发图表功能。而我们所开发的图表是需要有放大缩小功能，于是在网上找了很久，也没有找到合适的答案，大部分是通过监听窗口大小改变事件来设置，然而并不是我们所需要的。

最近使用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()方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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