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

 更新时间:2017年6月15日 10:00  点击:1242

最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便。但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能。当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化。而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的。于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在容器div里面设置了标记,每个div容器只能被渲染一次。知道原因之后,就容易了,就写了一个简单的demo。希望可以帮到有需要的同学。

html代码:

<!doctype html>
<html>
<head>
  <title>vue+chart</title>
  <script src="echarts.min.js"></script>
  <script src="vue.js"></script>
  <style>
    .button{
      float:left;
      width:150px;
      height:60px;
      color:#CC3333;
      border:2px solid #CC3333;
      background-color:#3399CC;
      line-height:60px;
      text-align:center;
      font-size:36px;
    }
    .button:hover{
      float:left;
      width:150px;
      height:60px;
      color:#3399CC;
      border:2px solid #3399CC;
      background-color:#CC3333;
      line-height:60px;
      text-align:center;
      font-size:36px;
    }
  
    .chart{
      margin:0 auto;
    }
    #but{
      width:310px;
      margin:0 auto;
    }
  </style>

</head>

<body>
  <div id="app">
    <div id="panel">
      <div class="chart" id="main" style="width:300px;height:300px"></div>
    </div>
    <div id="but">
      <div id="add" class="button" @click="add">放大</div>
      <div id="reduce" class="button" @click="reduce">缩小</div>
    </div>
  </div>
</body>
</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='<div class="chart" id="main" style="width:'+newVal+'px;height:'+newVal+'px"></div>';
      var myChart = echarts.init(document.getElementById('main'));
      myChart.setOption(option);
    })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

[!--infotagslink--]

相关文章

  • Vue.js中轻松解决v-for执行出错的三个方案

    v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
  • vue.js页面加载执行created,mounted的先后顺序说明

    这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07
  • Vue.js 递归组件实现树形菜单(实例分享)

    本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
  • 详解前后端分离之VueJS前端

    本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
  • Vue.js学习之过滤器详解

    过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。...2017-01-26
  • Vue.js组件tabs实现选项卡切换效果

    这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
  • Vue.js实战之利用vue-router实现跳转页面

    对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03
  • 学习 Vue.js 遇到的那些坑

    这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04
  • vue.js表格分页示例

    这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
  • 第一次接触神奇的前端框架vue.js

    第一次接触神奇的vue.js,主要了解一下v-model、v-if、v-else、v-show、v-for等,感兴趣的小伙伴们可以一起学习一下...2016-12-02
  • vue.js实现h5机器人聊天(测试版)

    这篇文章主要介绍了vue.js实现h5机器人聊天测试版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
  • Vue.JS入门教程之事件监听

    这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
  • Vue.js第三天学习笔记(计算属性computed)

    这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记,vue.js计算属性computed,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
  • Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

    这篇文章主要介绍了Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
  • vue.js实现仿原生ios时间选择组件实例代码

    本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码,具有一定的参考价值,有兴趣的可以了解一下。 ...2017-01-09
  • Vue.js之slot深度复制详解

    这篇文章主要介绍了Vue.js之slot深度复制的相关资料,文中介绍的很详细,对大家具有一定的参考价值,需要的朋友们来一起看看吧。...2017-03-13
  • Vue开发过程中遇到的疑惑知识点总结

    vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴,下面来一起看看吧。...2017-01-23
  • html+vue.js 实现漂亮分页功能可兼容IE

    功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案,需要的朋友可以参考下...2020-11-07
  • 用Vue.js实现监听属性的变化

    响应系统是Vue.js的一个显著功能,修改属性,可以更新视图,这让状态管理变得非常简单且直观。这篇文章主要给大家介绍如何利用Vue.js实现观察属性的变化,有需要的朋友们可以参考借鉴,感兴趣的朋友们下面来一起看看吧。...2016-11-22