echarts图表我在一个页面上做了两个柱状图,第一个有数据显示,第二个却不显示

echarts图表我在一个页面上做了两个柱状图,第一个有数据显示,第二个却不显示,数据都是在后台定义的一个字符串。

2

2个回答

你看下是不是因为这两个柱状图用了同一个ID。

0
Young_Gao
Young_Gao 回复BlueSkyXin: 定义两个id不同的div,分别加载两个不同的option就可以了
接近 2 年之前 回复
BlueSkyXin
BlueSkyXin 是的,都是barChart,但是怎样做才能让一个页面上显示两个柱状图呢?
接近 2 年之前 回复


<pre><code> var myChart = echarts.init(document.getElementById(&#39;main&#39;)); // 显示标题,图例和空的坐标轴 // 初始 option var option = { title: { text: &#39;&lt;%=year1() %&gt;年每月收入显示&#39; }, tooltip: {}, legend: { data: [&#39;金额&#39;] }, xAxis: { data: [] }, yAxis: {}, series: [{ label: { normal: { show: true, position: &#39;insideTop&#39; } }, name: &#39;金额&#39;, type: &#39;bar&#39;, data: [] }] }; function fetchData(cb) { // 通过 setTimeout 模拟异步加载 setTimeout(function () { cb({ categories: [&quot;1月&quot;, &quot;2月&quot;, &quot;3月&quot;, &quot;4月&quot;, &quot;5月&quot;, &quot;6月&quot;, &quot;7月&quot;, &quot;8月&quot;, &quot;9月&quot;, &quot;10月&quot;, &quot;11月&quot;, &quot;12月&quot;], data: [&lt;%=getMoney() %&gt;] }); }); } // 异步加载数据 fetchData(function (data) { myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: &#39;金额&#39;, data: data.data }] }); }); myChart.setOption(option); var myChart1231 = echarts.init(document.getElementById(&#39;dsa&#39;)); // 显示标题,图例和空的坐标轴 // 初始 option var twooption = { title: { text: &#39;&lt;%=year() %&gt;年每月收入显示&#39; }, tooltip: {}, legend: { data: [&#39;金额&#39;] }, xAxis: { data: [] }, yAxis: {}, series: [{ label: { normal: { show: true, position: &#39;insideTop&#39; } }, name: &#39;金额&#39;, type: &#39;bar&#39;, data: [] }] }; function fetchData(cb) { // 通过 setTimeout 模拟异步加载 setTimeout(function () { cb({ categories: [&quot;1月&quot;, &quot;2月&quot;, &quot;3月&quot;, &quot;4月&quot;, &quot;5月&quot;, &quot;6月&quot;, &quot;7月&quot;, &quot;8月&quot;, &quot;9月&quot;, &quot;10月&quot;, &quot;11月&quot;, &quot;12月&quot;], data: [&lt;%=getMoney1() %&gt;] }); }); } // 异步加载数据 fetchData(function (data) { myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: &#39;金额&#39;, data: data.data }] }); }); myChart1231.setOption(twooption); </code></pre> <p>
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
首先这种情况,我在网上看到了好多人问,确实也有正解,但是只是说出了其错误出现的原因,并没有给出解决方法。rn我也是深受其害,所以呢,在这里记录一下,分享给还在困扰着的你们,迅速找出解决办法。rnrn首先,我先简单介绍一下,我这里出现错误的情境。rn原来刚刚遇到这个问题的时候,是在点击多个tab选项之后,出现了地图不显示的情况,然后呢,我就一直在根据打开多个tab之后,地图不显示这个思路进行寻找bu
写一个echarts将两个将两个表放在同一个页面
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;script src=&quot;echarts.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;title&amp;gt;echarts&amp;lt;/title&amp;gt; &amp;lt;/head
echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
最近做的一个项目的其中一个页面有图表展示数据的需求,有柱状图、折线图和饼图,于是引入了强大的echarts. necharts的强大之处和有点这里就不多说了,详细请参照echarts官网和echarts在线demo。 n但是我们的页面要展示的数据比较多,同一个页面有数个折线图、柱状图和饼图。项目引入echarts的方法是模块化引入,于是就有了一个问题:怎么在同一个页面用echarts同时展示多个图...
echarts图表我在一个页面上做了两个柱状图,第二个有数据显示,第一个却不显示
[img=https://img-bbs.csdn.net/upload/201806/21/1529581069_720466.png][/img]
echarts实现一个页面同时显示多个图表
一个JSON数据,通过echarts实现一个页面同时显示多个图表,我这是通过写一个option实现多个图表(折线图,饼图,关系图)展示,也就是说只要一个div(dom对象),实现多个不同形状的图表展示。总体采用了LayUI(表格)+eCharts技术,通过在html页面,引入自定义的js,实现预期页面效果。n自己在网上找了下,没有找到对应的文章,直接来说怎么实现,所以特意写了此文章,共同学习。总结技巧:1.先用最少的代码显示出图 2.【关键点】自己能控制每个图在指定的地方的显示 3.确定每个图位置,整体布
单个WEB页面展示多个Echarts图表
单个WEB页面展示多个Echarts图表nn nn由于业务的需要,需要把多个数据报表放到同一个页面上,同时,对该页面添加一键导出EXCEL、WORD、PDF功能nn nnEcharts初级上手比较简单,直接依葫芦画瓢照着DEMO修改,拉取数据展示即可,但如果同时需要把十几个、几十个展示出来且放到同一个页面上就稍微复杂些了,需要考虑到页面拉取数据并发问题,数据拉取速率、界面展示等等诸多问题nn最开始...
echarts图表中的点、柱形或者折线显示不出来,但是有数据的问题解决(另附后台返回数据实例代码)
目前我遇到的暂时有两种情况,一个是版本,一个是require时候配置问题;rn版本可以理解,因为引用的echarts.js版本比价低,导致我所画的图出不来;后来换了最新版本的js就好了,直接取官网下载就行;rn第二种情况是我对这个api根本不熟悉,只为了完成任务,也没认真看;rn  require.config({n paths : {n 'ec
解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
近期项目中也使用到了Echarts来画图表,也是两个tab切换页面中都存在图表,页面加载完成后都对所有图表进行了初始化和绘制,然而在tab切换中出现了如下动图中的问题:rnrnrnrnrnrnrn图中可以看到,第一个tab显示是很正常的,但是第二个tab中内容显示不完整。rnrnrn我的解决方式如下:rn1--在tab导航中加入radio单选按钮并隐藏,当第二个tab被选中的时候,再初始化图表数据
echart柱形图-一条柱子显示多个数据
personCountOption = {n backgroundColor:'#fff',n tooltip: {n trigger: 'item',n axisPointer: { // 坐标轴指示器,坐标轴触发有效n type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'n },n
web单页面实现多个echarts图表铺满整个div(柱状图,折线图,饼形图……)
最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式
echart柱状图的柱子不见了?
背景:需要用到echarts的柱状图,然后效果是这样的nnnn(我不会告诉你这个效果就是解决好问题以后才出现的)nn过程:nn首先要说一下我为什么会有这个问题,第一二开的页面只能在app端查看,后来因为这个死穴所以才导致这个问题卡nn了差不多两三个钟。而且很无解,明明在本地测试可以,一到线上修改就不能显示柱子。给你们看一下我当初看到nn的样子,(我又不会告诉你这个效果是我调回去然后页面显示出来的效...
echarts图表显示问题
在iframe中加载实现了echarts的图表的页面,有的时候会出现无法显示的问题,需要重载一下iframe引入的页面:尤其是在火狐浏览器上面,火狐似乎对iframe支持不大友好,不能执行加载目标页面的onload方法
如何在网页中显示数据图表--Echarts入门教程
如何在网页中显示数据图表–Echarts入门教程五分钟上手官网文档链接地址–>戳这里 n一、下载所需要的echarts.min.js文件 n官网下载链接 ncsdn下载链接
Echarts循环显示的一个例子
先上张效果图:rnrnrn如果有多个,会依次往下排。本来考虑用表格table、td、tr来实现,但问题是不好做循环,后来考虑到用标签来做,但由于运用echarts画柱状图与饼状图时需要规定宽度与高度,不能直接对高度进行设定,最后考虑使用来实现,通过属性display:inline来实现4列。部分代码如下:rn for(var i = 0 ; i < 1; i++){n //初始化4个节点n $
使用Bootstrap tab切换引入echarts图表。第一个tab显示正常,
使用Bootstrap tab切换引入echarts图表。第一个tab显示正常,n n其他三个显示不正常,很头疼,于是百度解决方法n n解决办法n原因是bootstrap不显示tab的display为none导致图表无法植入n解决如下(重置一下样式):n.tab-content > .tab-pane,n.pill-content > .pill-pane {ndisplay: block; /* undo display:none */nheight: 0;
在Java web页面使用ECharts制作图表
Echarts:是通过javascript做出精美图表的插件;nn首页:https://echarts.baidu.com/echarts2/doc/example.htmlnnnn 那么怎么在Java web页面使用ECharts制作图表?nn配置方面nn1、下载echarts.min.jsnn2、在webroot下面新建一个js文件夹,然后把echarts.min.js拷贝进去nnnn小栗子n...
echarts柱状图显示太靠左
[javascript]view plaincopynn如下图所示:nnn[javascript]view plaincopynn解决方案:n grid: {n x: '30%', //相当于距离左边效果:padding-left y: '30%', //相当于距离上边效果:padding-top bottom: '3%',n ...
echarts精简版demo(一页面显示多图表)
echarts精简版demo(一页面显示多图表)
js-解决echarts在使用tab情况下现实不全的问题
加载echarts后,发现除了第一个tab,其他tab里面的图表都没有写渲染出来。但是,如果设置为active之后,就能够渲染出来。$(document).ready(function(){ n $("#ios").removeClass("active");n $("#jmeter").removeClass("active");
vue中tab切换时Echarts在第二个页面无法正常显示
vue中tab切换时Echarts在第二个页面无法正常显示n接手的数据可视化的项目,在某个模块中使用了tab切换来展示不同的数据呈现,结果就出现了问题,第一个页面展示的好好地,但是在第二个页面有的只显示一点点宽度,有的甚至直接就没有了。n经排查是E charts图表在第二个页面渲染的时候无法拿到父元素的高度和宽度造成的,造成这种情况的我所遇到的两种情况,分享给大家。n无法获取高度和宽度原因:n我们...
echarts图表展示中,前端页面赋值无误,图表不能显示,有可能是封装的数据格式不正确
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;n /*var data = {legendData:['行业协会','市场监管','公开市场','爬虫数据','车辆数据','车商数据','业务系统','车商ERP','深度'],n xAxisData:['五月','六月','七月','八月','九月','十月','十一月'],n ...
2017_12_05 echarts动态赋值问题,tab切换时,图表显示错乱
当一张echarts图表中有多个选项切换时,在向option中setOption中的时候,要保证,这时候的option中并没有任何数据,否则,会将两次数据合并,就会导致数据错乱问题,官网上有个解决方法,是setOption时,可以设置三个属性,代码示例是这样:我如图进行设置以后,并没有解决我想要解决的问题,所以我用了一种蠢的方法,将要赋值的data数据等定义为全局变量,再在每次调用ajax以后进行...
ECharts浮动柱状图
function cityTimeCount(){rn    var myChartOne = echarts.init(document.getElementById('cityTimeCount'));rn    optionOne = {rn        tooltip : {rn            trigger: 'axis',rn            axisPointer :
关于echarts动态图表tab切换出现的问题
记笔记,免忘记!nn新界面改版,设计图含有饼状图和折线图的tab切换,移动端上写饼状图和折线图什么的完全不知道要怎么动手。本人比较小白。后来求助广大历害的网络,使用了echarts.min.js 这个来写饼状图和折线图,果然简单有效。不过头一次用这个js还真是不太会啊..../(ㄒoㄒ)/~~   echart官网nn我是把页面布局弄完最后才写饼状图和折线图。最后tab切换时发现一个问题。就是第一...
h5做echarts图表Tab切换时图表被压缩或不显示的问题
项目中遇到的坑,在这里记录一下n单纯的写个tab切换图表,是这样显示的。。。nn很明显的可以看出来在tab切换的时候第二张图表是被压缩显示的。n但是,只要我们在切换的时候调用一下被使用的函数,图表就会完整显示。n代码展示:nHTMLn&amp;lt;div class=&quot;totalTab&quot;&amp;gt;n &amp;lt;ul class=&quot;tab&quot; style=&quot;margin-top: 10px;&quot;&amp;gt;n ...
使用ECharts在jsp页面上绘制动态图表 (补16年12月)
上网时经常看到网站的一些数据用绚丽的动态图表展示,那他们是怎么做到的呢,我先研究了Highcharts,但用到项目里,CPU爆表,项目卡死,于是转战百度公司开发的EChartsnnn    ECharts 2.0效果图如下:n    更多2.0版样例,请点击这里nnnnnnnn    nn    具体使用:n    1.后台查询想要显示的数据,返回json
echarts柱形图x轴显示不全,每隔一个不显示的问题
问题原因可能:x轴数据间隔太小;nn问题解决:1、调整间隔属性修改                                       axisTick:为:axisLabel:nn nn                    2、改变x轴显示为竖向显示...
echarts如何实现在一个页面放置多张图
有时我们会遇到在一个页面放置两个或多个echarts图表不能显示的问题,这篇文章将提供一种在一个页面放置多张echarts图的方法。&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;require.config({  paths:{    'echarts':chart_path,    'echarts/chart/line':chart_path,  }});requi...
echarts如何移动到柱状图上显示自己想显示的提示信息
n n n 首先把series里面的数据换成含有value的对象nnameArr是显示x轴显示的名称,dataArr是series显示的数据nlet nameArr=[],dataArr=[];n for(let i=0;i&amp;lt;data.length;i++){n nameArr.push(data[i].name);n data[i]....
关于echarts多个柱状图重叠,且总数不会叠加。
设置echarts多个柱状图重叠,而且数据不会叠加。附上地址:http://echarts.baidu.com/option.html#series-bar.barGapnnnn对比图nn
Echarts 多个图表
一个Option 四个均匀分布图表var dataAll = [n [n [10.0, 8.04],n [8.0, 6.95],n [13.0, 7.58],n [9.0, 8.81],n [11.0, 8.33],n [14.0, 9.96],n [6.0, 7.24],n [4...
echarts柱状图轻松实现分别采用两个不同单位的y轴
echarts柱状图轻松实现分别采用两个不同单位的y轴:nnnn秘籍:nnnn代码nnn // 基于准备好的dom,初始化echarts实例n n var colors = ['#0089FF','#B865DF',/*'#5ADF63','#FFDD00',*/'#224666', '#675bba'];n // ...
echarts 三种数据双y轴显示 (文末附带完整代码)
说明:网络引用echarts.js和直接下载echarts引用的样式可能会不一致,需要对折线的样式和字体进行修改的请参考我的另外一篇文章https://blog.csdn.net/Wangwangwang___/article/details/81317732nn1、展示效果:nnnn2、代码说明:nnnn3、完整代码 nnn &amp;lt;div id=&quot;trmmEcharts&quot;  class=&quot;ec...
echarts 实现柱状图左右横向显示
具体实现代码如下 解决echarts 负轴,浮动负数,等的显示 nfunction chart_rkk(){n var rkkchart=echarts.init(document.getElementById('rkkDiv'));n var ageArea = [ '0~10','11~30','30~60','60~100','100以上'];n var FbarData
echarts学习总结(二):一个页面存在多个echarts图形,图形自适应窗口大小
如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为rnrn                  myChart.setOption(option); rn                window.onresize = myChart.resize; rn则只有一个图形可自适应窗口大小,另外一个则不能随窗口大小而改变图形大小,rn解决办法为在每一个echarts图形页面将上面代
vue单页面中有多个echarts图表时公用代码写法
nhtml中:nn &amp;lt;div class=&quot;charts1&quot;/&amp;gt;n &amp;lt;div class=&quot;charts2&quot;/&amp;gt;n &amp;lt;div class=&quot;charts3&quot;/&amp;gt;n &amp;lt;div class=&quot;charts4&quot;/&amp;gt;n &amp;lt;div class=&quot;chart
echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据
echarts显示柱状图的时候,旁边放一张中国地图,当鼠标移入柱状图,旁边中国地图对应的区域亮起来。先放效果图~~这是原始页面这是鼠标移上去的样子这是鼠标离开之后的样子总之呢,就是给他俩弄一个联动的效果,移入柱状图,地图跟着动起来,并且数据跟着变。柱状图后台数据库:地图后台数据库:思路大概是这样的:当鼠标移入柱状图的时候,获取当前移入的索引,先让柱状图的图标显示出来;然后根据日期进行判断,看当天有...
echarts图表工具栏点击展示表格数据
toolbox: {n show: true,n right:&quot;5%&quot;,n top:&quot;5%&quot;,n feature: {n mark: {show: true},n dataView: {n show: true,n...
echarts饼图、柱状数据为0时,饼图、柱状图显示高度
饼图:n series: [n {n type: 'pie', n minAngle:[10]n }n ]nnn柱状图:nn series: [n {n ...
一个页面多个echarts图表自适应
一个页面如果有多个echarts图表,想让图表随着浏览器的大小自适应的话,用window.onresize = myChart.resize; 得到的效果是只有最后一个图表可以自适应。多个图表都都自适应window.addEventListener(&quot;resize&quot;, function () {    myChart.resize();});...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 尚学堂大数据培训做了多久 我学python