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

我想做到点击后放大,再点击缩小,请问该怎么做?
附上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个回答

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

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

qq_35649402
你们让我起个名啊 老哥,你说的我没懂..
2 年多之前 回复

图片说明

m0_38082783
Rattenking 回复你们让我起个名啊: canvas需要再次绘制,才能实现放大缩小
2 年多之前 回复
qq_35649402
你们让我起个名啊 Can't get dom width or height echarts.js:1704:18 这样做不行..
2 年多之前 回复

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

a314066646
FEN_TA 设置两个DIV一个大一个小, 大小隐藏切换吧
2 年多之前 回复
m0_38082783
Rattenking 这样就能实现div中图片的放大缩小
2 年多之前 回复
m0_38082783
Rattenking 2、将绘制过程写一个函数,页面加载的时候绘制一次,点击的时候再次绘制
2 年多之前 回复
m0_38082783
Rattenking 1、页面刷新,将需要设置的高作为参数,传入刷新页面,重新设置div高;
2 年多之前 回复
m0_38082783
Rattenking 我刚刚自己写了一下,div中的图片放大或者缩小,是需要重新绘制的,也就是说单独的设置div的宽高是不行的,两种方法解决重新绘制:
2 年多之前 回复
a314066646
FEN_TA 没说不可以
2 年多之前 回复

一个例子,不知道是不是你要的
<%@ 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>

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

 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
        }
    }
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!