HTML+vue+echarts，echart图展示不全解决方法

最新推荐文章于 2024-09-19 02:48:01 发布

ljf8838

最新推荐文章于 2024-09-19 02:48:01 发布

阅读量920

点赞数

分类专栏： web 文章标签： Vue.js ECharts 图表渲染企业碳排放前端开发

本文链接：https://blog.youkuaiyun.com/ljf12138/article/details/123229336

版权

web 专栏收录该内容

18 篇文章

订阅专栏

本文档展示了如何在一个HTML页面中结合Vue和ECharts库创建企业碳排放的监测图表。首先引入了jQuery、Vue和ECharts的JS库，并设置了样式。接着，为展示概况、分布和占比的三个图表，分别在对应的div中添加了用于渲染ECharts的div元素，指定了宽度和高度。问题在于原始代码中没有为ECharts的容器设置具体尺寸，解决方案是在每个图表的div内添加内联样式，指定宽度为90%，高度为15.54rem，确保图表能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面主要由HTML+js构成，然后引入vue，填充echart图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业碳排放监测</title>
    <script type="text/javascript" src="../../static/js/jquery.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script type="text/javascript" src="../../static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="../../static/css/comon0.css">
</head>
<body>
<div class="mainbox" id="app">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">概况</div>
                <div class="allnav" id="echart1">
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">分布</div>
                <div class="allnav" id="echart2">
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">占比</div>
                <div class="allnav" id="echart3">
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>

在这里插入图片描述
解决办法：
在id =echart1 的div 添加：<div id="echart1" :style="{width:'90%',height:'15.54rem'}"></div>，具体修改如下

<div class="boxall" style="height: 3.2rem">
     <div class="alltitle">概况</div>
      <div class="allnav">
          <div id="echart1" :style="{width:'90%',height:'15.54rem'}"></div>
      </div>
      <div class="boxfoot"></div>
  </div>
  <div class="boxall" style="height: 3.2rem">
      <div class="alltitle">分布</div>
      <div class="allnav">
          <div id="echart2" :style="{width:'90%',height:'15.54rem'}"></div>
      </div>
      <div class="boxfoot"></div>
  </div>
  <div class="boxall" style="height: 3.2rem">
      <div class="alltitle">占比</div>
      <div class="allnav">
          <div id="echart3" :style="{width:'90%',height:'15.54rem'}"></div>
      </div>
      <div class="boxfoot"></div>
  </div>