echarts柱状折线图数据量大,柱状图不显示问题解决办法.

最新推荐文章于 2024-08-13 15:11:28 发布

我叫刘半仙

最新推荐文章于 2024-08-13 15:11:28 发布

阅读量2.2w

点赞数 4

分类专栏：问题积累文章标签： js echarts 数据量

本文链接：https://blog.csdn.net/liugh_xian2016/article/details/54691424

版权

本文介绍了如何处理echarts在数据量过大时柱状图无法显示的问题。通过使用dataZoom属性，实现了数据的动态加载，有效解决了因数据量大导致的渲染问题和鼠标移动时的卡顿现象。详细步骤包括在HTML中引入echarts，设置图表数据和属性，以及渲染初始化。这种方法能帮助开发者优化大数据量图表的展示效果。

摘要由CSDN通过智能技术生成

前言

百度的echarts是一款开源软件，为我们提供了漂亮的图形界面。它的简单,易用,种类多和兼容性好等特点备受开发人员青睐。本文将提供一种思路来解决柱状图后台返回的数据量大，无法渲染的问题，供大家参考。问题如下：

只显示了折线图，用电负荷(柱状图)是有数据的但未显示，原因是数据量过大无法渲染出来，并且在鼠标移动在图上时会卡顿：

1.在html中引入echarts,并为echarts图准备容器.

<head>   
    <meta charset="utf-8">      
    <title>demo</title>    
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts/echarts.min.js"></script> 
</head> 
<body> 
       <!-- 图表展示-->
    <h4>数据图</h4>                         
    <div style="width:100%">
      <div id="main1" class="chart2"></div>
    </div>        

</body>

2.添加echarts图数据和属性设置

       var main1Json ={id:"main1",
                title:"",
                subtitle:"",
                unit:['负荷:KW','同比:%'],
                legend:['用电负荷','同比增长率'],
                xAxis:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17&#