问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

echarts图表在div尺寸变化时的自适应

头像
啊哈hl
    14121124

    图片描述
    图片描述
    如何让第二张图后面没有空白

    javascriptcsshtmlhtml5
    阅读 36.9k
    12 个回答
    得票最新
    头像
    逗比凯
      129415

      <!doctype html>
      <html lang="us">
      <head>

      <meta charset="utf-8">
<title></title>
<script src="echarts.min.js"></script>

      </head>
      <body>

      <div id="main" style="width: 600px;height:400px;"></div>

      </body>
      </html>
      <script src="jquery.js"></script>
      <script>

      var myChart = document.getElementById('main');

//自适应宽高
var myChartContainer = function () {
    myChart.style.width = window.innerWidth+'px';
    myChart.style.height = window.innerHeight+'px';
};
myChartContainer();
var myChart = echarts.init(myChart);

option = {
    title: {
        text: '基础雷达图'
    },
    radar: {
        indicator: [
           { name: '销售', max: 6500},
           { name: '管理', max: 16000},
           { name: '信息技术', max: 30000},
           { name: '客服', max: 38000},
           { name: '研发', max: 52000},
           { name: '市场', max: 25000}
        ],
        name:{
            formatter:function(v){
                console.log(v);return v;
            }
        },
        triggerEvent:true
    },
    series: [{
        name: '预算vs开销',
        type: 'radar',
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销'
            }
        ]
    }]
};

 myChart.setOption(option);
 
 //浏览器大小改变时重置大小
 window.onresize = function () {
    myChartContainer();
    myChart.resize();
};

      </script>

      头像
      秋意浓
        216125
        var myChart = echarts.getInstanceByDom(document.getElementById(id)); //通过DOM id获取到echarts实例
window.onresize = function(){
    myChart.resize(); 
});

        首先你得保证图表的容器是自适应的

        头像
        circle
          4.7k92434
          头像
          IMyxuan
            335210

            需要绑定一个resize事件，然后Echarts才能在宽度改变的时候重新渲染

            头像
            瘦子
              31912947
              var myChart = echarts.getInstanceByDom(document.getElementById(id)); //通过DOM id获取到echarts实例
setTimeout(function(){
    window.onresize = function(){
    myChart.resize(); 
});
},200)
              头像
              胡昊林
                761220

                window.onresize = function(){

                myChart.resize();

                });
                只要在改变宽度时重新渲染就可以了

                头像
                四月的桜和猫
                  3.3k53055

                  我感觉你问的是两个问题
                  1.如何自适应
                  解决办法：用js的resize方法监听窗口变化 自适应更改canvas画布大小

                      onlineChart.setOption(option);
    window.addEventListener("resize", function () {
        setTimeout(function () {
            onlineChart.resize();
        }, 500)
    });

                  2.如何使div中没有空白 全部占满：
                  这个是echarts中的一个属性 你可以控制grid 控制grid 改变距边框的top left right bottom
                  链接给你http://echarts.baidu.com/opti...
                  代码：

                    options: [{
            calculable: true,
            grid: {
                y: 110,
                y2: 110
            },
            xAxis: [{
                type: 'category',
                axisLabel: {
                    show: false,

                },
                  头像
                  zhengtulym
                    8541930
                    window.onresize = function(){
  myEchart.resize(); //myEchart为echarts.init初始化得到的对象
}
                    头像
                    程序猩
                      52
                      新手上路，请多包涵

                      window.onresize = function(){

                                          $("#chart1").width($('#panContainer').width());  
                    myChart.resize();
                };
                      头像
                      热情市民皮皮
                        1
                        新手上路，请多包涵

                        image.pngimage.png
                        // main.js 中事件总线
                        Vue.prototype.$EventBus = new Vue();

                        //父组件中点击事件
                        toggleSliders() {

                                this.iftoggleSlider = !this.iftoggleSlider;
        this.$EventBus.$emit("toggleSlider", this.iftoggleSlider);
    }

                        //E charts子组件中

                        mounted() {

                            // 通过时间总线传递的数据更新画布的宽度
    this.$EventBus.$on("toggleSlider", (sliderFlag) => {
        var _this = this;
        var chartsDiv = document.getElementById(_this.id);
        if(!chartsDiv){
            return false;
        }
        if (sliderFlag) {
            chartsDiv.style.width = 'calc(100vw - 478px)';
        } else {
            chartsDiv.style.width = 'calc(100vw - 48px)';
        }

        var barCharts = echarts.init(chartsDiv);
        barCharts.setOption(_this.option);
        barCharts.resize();
    });
},
                        头像
                        jane_xxx
                          2
                          新手上路，请多包涵

                          想问楼主 这个问题您解决了吗？

                          撰写回答
                          你尚未登录，登录后可以
                          • 和开发者交流问题的细节
                          • 关注并接收问题和回答的更新提醒
                          • 参与内容的编辑和改进，让解决方法与时俱进
                          推荐问题