weixin_58412143 2022-03-22 09:41 采纳率: 91.6%
浏览 119
已结题

echarts 自适应后数据视图脱离了外层div

数据视图点开全屏了,怎么让他和图表在一个地方(默认不是在一个地方的吗)

自适应——
initEcharts1() {
        let myCharts = document.getElementById("bottomRightChart");
        myCharts.style.width = 58 + "rem";
        myCharts.style.height = 21.5  + "rem";
        this.myCharts = this.$echarts.init(myCharts);
        this.myCharts.setOption(this.options);
        this.myCharts.resize();
        let self = this;
        window.addEventListener("resize", () => { // 通过resize方法来重设图表宽度850/320
          let myCharts = document.getElementById("bottomRightChart");
          myCharts.style.width = 58 + "rem";
          myCharts.style.height = 21.5 + "rem";
          self.myCharts.resize();
        });
      },
数据视图——
optionToContent: function(opt) {
              var angleAxisData = opt.angleAxis[0].data;
              console.log(angleAxisData[0].value)
              var seriesData = opt.series;
              var table =
                '<div class="tableweb" style="width:1300px;height:301px"><table style="width:95%;height:100%;text-align:center;margin-left:0px;"><tbody><tr>' +
                '<td style="width:20px;">风向</td>' +
                '<td style="width:20px;">' + seriesData[0].name + '</td>' +
                '<td style="width:20px;">' + seriesData[1].name + '</td>' +
                '<td style="width:20px;">' + seriesData[2].name + '</td>' +
                '<td style="width:20px;">' + seriesData[3].name + '</td>' +
                '<td style="width:20px;">' + seriesData[4].name + '</td>' +
                '<td style="width:20px;">' + seriesData[5].name + '</td>' +
                '<td style="width:20px;">' + seriesData[6].name + '</td>' +
                '<td style="width:20px;">' + seriesData[7].name + '</td>' +
                '<td style="width:20px;">' + seriesData[8].name + '</td>' +
                '<td style="width:20px;">' + seriesData[9].name + '</td>' +
                '<td style="width:20px;">' + seriesData[10].name + '</td>' +
                // '<td style="width:150px;height:50px">风速1</td>' +
                '</tr>';
              for (var i = 0, l = angleAxisData.length; i < l; i++) {
                table += '<tr>' +
                  '<td style="width:30px;">' + angleAxisData[i].value + '</td>' +
                  '<td style="width:30px;">' + seriesData[0].data[i] + '</td>' +
                  '<td style="width:30px">' + seriesData[1].data[i] + '</td>' +
                  '<td style="width:30px">' + seriesData[2].data[i] + '</td>' +
                  '<td style="width:30px">' + seriesData[3].data[i] + '</td>' +
                  '<td style="width:20px">' + seriesData[4].data[i] + '</td>' +
                  '<td style="width:20px">' + seriesData[5].data[i] + '</td>' +
                  '<td style="width:20px">' + seriesData[6].data[i] + '</td>' +
                  '<td style="width:20px">' + seriesData[7].data[i] + '</td>' +
                  '<td style="width:20px">' + seriesData[8].data[i] + '</td>' +
                  '<td style="width:20px">' + seriesData[9].data[i] + '</td>' +
                  '<td style="width:20px">' + seriesData[10].data[i] + '</td>' +
                  '</tr>'
              }
              table += '</tbody></table></div>';
              return table;
            },

img

  • 写回答

1条回答 默认 最新

  • weixin_58412143 2022-03-23 09:48
    关注
    <Echart style="position: relative;" :options="options" id="topRightChart" height="100%" width="100%"></Echart>  加上 style="position: relative;"就好了
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月31日
  • 已采纳回答 3月23日
  • 创建了问题 3月22日

悬赏问题

  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因