echarts异步加载数据更新及样式修改

2024-11-07 19:00:49

1、先说echarts异步加载数据不更新的问题吧。我估塥骈橄摆计就是seriesdata那个值没更新于是我就想了个笨办法,把之前的div删掉再新建一个div放新的值,我都被我的蝽亭曜眯智商折服了本着为大众负责的精神,在写这篇经验前,我专门百度了一下。发现这个不更新的问题,超简单barChart.setOption(option,true);就可以了摘自百度“万能接口,配置图表实例任何可配置选项(详见option),多次调用时option选项默认是合并(merge)的”看网上说有的设置了还是没办法,那你就用我的笨办法试试吧 var byId = function(id) { return document.getElementById(id); }; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(byId('main')); // 使用刚指定的配置项和数据显示图表。 //官方推荐方法 begin true表示每次重新更新 myChart.setOption(option,true); //官方推荐方法 end true表示每次重新更新 //笨办法,删除后再新建 begin if (laiyuanTecord!='渠道') { $('#main').remove(); $('#mainnew').html('<div class="chart" id="main"></div>'); } //笨办法,删除后再新建 end

echarts异步加载数据更新及样式修改

2、再说echarts 饼形图不显示对应数据,非要点一下才显示的傲娇毛病吧其实也超简单,在ser坡纠课柩ies下的itemSty造婷用痃le下加normal就好了其中formatter: '({d}%)\n{b}:{c}' ,分别{d}代表百分比。\n表示换行{b}代表这块的名字,{c}代表这块的值。这些都是可以随意换位置的 itemStyle: { normal:{ label:{ show: true, formatter: '({d}%)\n{b}:{c}' }, labelLine :{show:true} } }

echarts异步加载数据更新及样式修改echarts异步加载数据更新及样式修改

3、再说echarts柱形图不显示对应数据,非要点一下才显示的傲娇毛病吧其实也超简单,在option下加label就好了 label: { normal: { show: true, position: 'top' } }如果你不需要放上去显示的那个,你就把 tooltip删掉就好了

echarts异步加载数据更新及样式修改echarts异步加载数据更新及样式修改

4、再说echarts柱形图合并展示的问题吧当你的数据特别多的时候,散成一团也不方便看,就想着合并吧这个的话就需要你在创建数据的时候要给他们分到对应的组stack

echarts异步加载数据更新及样式修改

5、再说一下echarts柱形图底部坐标刻度内容太多会出现省略的问题 axisLabel:{interval: 0}默认auto'auto'(自动隐藏显示不下的)|0(全部显示) |{number}(用户指定选择间隔)eg:axisLabel:{interval: 4}表示间隔4个显示

echarts异步加载数据更新及样式修改
猜你喜欢