qq_35649402
你们让我起个名啊
采纳率42.3%
2017-05-18 07:33 阅读 3.8k

请问大神,Echarts如何点击div改变图的大小?

2

我想做到点击后放大,再点击缩小,请问该怎么做?
附上jsp

 <%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>温度管理</title>
</head>
<div id="d" style="width: 150px; height: 68px;" ></div>

<body>
    <script type="text/javascript"
        src="/jeesite/static/js/echarts/echarts.js"></script>
    <script type="text/javascript"
        src="/jeesite/static/jquery/jquery-1.8.3.js"></script>
    <script type="text/javascript">


    var myChart = echarts.init(document.getElementById('d'))

        option = {
            title : {

                text : '实时温度',
                textStyle : {
                    fontSize : 20,
                    color : [ '#3398DB' ],
                }
            },
            //颜色渐变
            visualMap : {
                min : 0,
                max : 80,
                left : 'left',
                top : 'bottom',
                text : [ '高', '低' ], // 文本,默认为数值文本
                calculable : true,
                inRange : {
                    color : [ '#00FF00', '#32CD32', '#2E8B57', '#FF0000',
                            '#B22222', '#8B0000' ]
                }
            },

            color : [ '#3398DB' ],
            tooltip : {
                trigger : 'axis',
                axisPointer : { // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                },
                feature : {
                    mark : {
                        show : true
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    restore : {
                        show : true
                    },
                    savaAsImage : {
                        shwo : true
                    }
                }
            },

            grid : {
                left : '3%',
                right : '4%',
                bottom : '3%',
                containLabel : true
            },

            grid : {
                y2 : 140
            },
            xAxis : [ {
                type : 'category',
                data : [],
                axisTick : {
                    alignWithLabel : true
                },
                axisLabel : {
                    interval : 0,
                    rotate : -30,
                }
            }, {
                type : 'category',
                data : [],
                axisTick : {
                    alignWithLabel : true
                },
                axisLabel : {
                    interval : 0,
                    rotate : -30,
                }
            } ],
            legend : {
                data : [ '当前温度' ]
            },
            yAxis : [ {
                type : 'value'

            } ],
            series : [ {
                name : "",
                type : 'bar',
                barWidth : '60%',
                //顶部显示温度'top'
                label : {
                    normal : {
                        show : true,
                        position : 'top'
                    }
                },
                data : []
            }

            ]

        };
        var tagId = [];
        var temperature = [];//温度信息
        var addTime = [];//读取时间
        var remarks = [];//备注信息
        $.ajax({
            type : "post",
            async : true, //异步请求:同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行
            url : "${ctx}/temperature/tblTem/allTem",
            data : {

            },
            dataType : "json",
            success : function(result) {
                //请求成功时执行该函数内容,result即为服务器返回的json对象
                    //  alert('实时温度系统');
                    for (var i = 0; i < result.length; i++) {
                        temperature.push(result[i].temperature);
                        addTime.push(result[i].addTime);
                        remarks.push(result[i].remarks);
                        tagId.push(result[i].tagId);
                    }

                    myChart.setOption({
                        xAxis : [ {
                            data : addTime
                        }, {
                            type : "category",
                            data : remarks
                        } ],
                        series : [ {
                            type : 'bar',
                            data : temperature,
                            //画直线
                            markLine : {
                                data : [ {
                                    name : '起始',
                                    xAxis : 0,
                                    yAxis : 55
                                }, {
                                    name : '结束',
                                    value : 40,
                                    xAxis : 0,
                                    yAxis : 40
                                } ],

                            }
                        } ]
                    })
                }

        });

        myChart.setOption(option);

        //打印数据
        console.warn(remarks, addTime, temperature);
    </script>
    <script language="JavaScript">
        function myrefresh() {
            window.location.reload();
        }
        setTimeout('myrefresh()', 60000); //指定1分钟刷新一次
    </script>

</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • 已采纳
    m0_38082783 Rattenking 2017-05-18 09:35

    点击前图片说明
    点击后图片说明
    点击前是200px的高,点击后400px的高,解决这个问题要么刷新页面自动重新绘制,要么直接调用函数主动重新绘制。建议你采用第二种,必定在同一页面,重绘比较方便。

    点赞 评论 复制链接分享
  • a314066646 FEN_TA 2017-05-18 07:41

    div 上加onclick 吧
    立flag 奇数就设置div大小变大
    偶数就设置div变大

    点赞 评论 复制链接分享
  • a314066646 FEN_TA 2017-05-18 07:52

    图片说明

    点赞 评论 复制链接分享
  • m0_38082783 Rattenking 2017-05-18 08:15

    为啥不直接flag = false;true切换,这样直接变量,最后flag点击多了弄很大。
    判断还麻烦,用false和true直接
    if(flag){//代码}else{//代码}

    点赞 评论 复制链接分享
  • nacy666 nacy666 2017-08-09 09:35

    一个例子,不知道是不是你要的
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    vue+chart

    <!-- -->
    <style>
        .button{
            float:left;
            width:50px;
            height:30px;
            color:#CC3333;
            border:1px solid #CC3333;
            background-color:#3399CC;
            line-height:30px;
            text-align:center;
            font-size:20px;
        }
        .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>
    





        <div id="but">
            <div id="add"  class="button" @click="add">放大</div>
            <div id="reduce" class="button" @click="reduce">缩小</div>
        </div>
    </div>
    
    <script type="text/javascript">
    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;
                                }
    
                        /*  或者直接this.size=600; */
                            },
                        reduce:function(){
                            if(this.size>300){
                            this.size=this.size-50;}
                            else{
                            this.size=300;
                            } 
                           /* 或者直接 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){
            alert("newVal="+newVal);
            alert("oldVal"+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);
        })
    </script>
    

    点赞 评论 复制链接分享
  • killerbigsweet killerbigsweet 2017-11-30 07:38

    最近正在做的项目也有这个需求,下面是我实现的代码楼主可以参考一下

     changeViewPie () {
            const timer = setTimeout(() => {
                this.drawPie()
                this.setChartPie(this.chartPieFlag)
            }, 300)
            if (this.bigChartPie) {
                this.bigChartPie = !this.bigChartPie
                this.$refs.myChartPie.innerHTML = "<div id='myChartPie' style='width: 4.9rem;height: 3.5rem'></div>"
                timer
            } else {
                this.bigChartPie = !this.bigChartPie
                this.$refs.myChartPie.innerHTML = "<div id='myChartPie' style='width: 9.94rem;height: 6.33rem'></div>"
                timer
            }
        }
    
    点赞 评论 复制链接分享

相关推荐