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

最新推荐文章于 2024-04-08 18:43:15 发布

ljf8838

最新推荐文章于 2024-04-08 18:43:15 发布

阅读量862

点赞数

分类专栏： web 文章标签： linux mysql mysql安装

本文链接：https://blog.csdn.net/ljf12138/article/details/123229336

版权

Vue.js ECharts 图表渲染企业碳排放前端开发

关键词由CSDN通过智能技术生成

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

页面主要由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>

ljf8838

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+vue+echarts，echart图展示不全解决方法

页面主要由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>
复制链接

扫一扫

专栏目录