精华内容
下载资源
问答
  • 业务需求 需要开发一个动态tab用来切换Echarts图表显示,tab项指定显示图表的展示数据。 实现思路 通过多个DIV标签承载Echarts图表...本该按照百分比显示的Echarts图表显示了很小的宽和高,当我打开控制台或者对...

    业务需求

    需要开发一个动态tab用来切换Echarts图表的显示,tab项指定显示图表的展示数据。

    实现思路

    通过多个DIV标签承载Echarts图表。起初的思路是将多个DIV标签设置样式display:none:进行隐藏,在每次进行tab切换时,先改变DIV标签的样式让其显示,然后进行数据请求并绘制图表。

    出现问题

    本该按照百分比显示的Echarts图表只显示了很小的宽和高,当我打开控制台或者对页面布局大小进行控制,就会突然转换为百分比显示。

    解决思路

    因为动态的去让DOM元素取消与显示,可能会影响DOM的加载、图标的绘制。
    所以想了两个办法,要么不操作DOM,要么不按百分比显示(利用媒体查询)。

    媒体查询的方案期初在两个常见分辨率可以较好的显示,但这样的响应式存在较大的局限,也会影响用户体验,于是考虑不操作DOM。

    让Echarts图表项隐藏的办法可以用透明度opacity来控制,这样就避开了DOM操作,此时将DIV标签绝对定位到父级标签。

    新的问题

    然后在切换时出现了新的问题,Echarts上的tooltip提示框没有显示,只显示了HTML中最后一个DIV的tooltip。

    问题定位失败

    对这个细节的思考,我竟然定位到了图表本身,既然有的图标能显示,显然不是图标的问题。我想到了透明度opacity属性是将其以及子代所有元素透明,是不是tooltip被透明了,我又错误的想使用background:rgba()方式进行透明度变更。以为只透明本身元素即可。试了以后才发现并不是这个影响。既然有一个Echarts的图表可以显示tooltip,就证明无关透明度本身了,而我连续两次问题定位失误。

    问题解决

    经过思考以后,我尝试改变DIV标签的定位方式,发现相对定位可以显示,说明是DIV层级显示有问题导致了tooltip不显示,也和最后一个DIV显示相吻合。

    于是,我在透明度切换的同时,变更DIV标签的显示层级,此时这个问题迎刃而解了。

    问题补充

    在这个问题之前,我一直用操作DOM的方式展示图表,发现Echarts中部分图表会出现数据内容合并的情况,无关图表的网络数据请求,而是图表的setOption方法,第二个参数会默认图表内容合并。内容如下:

    chart.setOption(option, {
        notMerge: ...,
        lazyUpdate: ...,
        silent: ...
    });
    

    option
    图表的配置项和数据,具体见配置项手册。
    1. notMerge
    可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。
    2. lazyUpdate
    可选,在设置完 option 后是否不立即更新图表,默认为 false,即立即更新。
    3. silent
    可选,阻止调用 setOption 时抛出事件,默认为 false,即抛出事件。

    展开全文
  • 问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。 添加window自适应方法不管用,如下: mychart.setOption(option); $(window).resize(function() { //重置容器高宽 my...

    原文:https://blog.csdn.net/liuminyi1987/article/details/79653737 

    问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。

     

    添加window自适应方法不管用,如下:

     mychart.setOption(option);
     $(window).resize(function() { //重置容器高宽 mychart.resize(); });
    各种搜索这个问题,找到了方法。

     

    先借鉴大牛解释出现这个问题的原因:

    查了一下echarts源码,发现了这个
    Painter.prototype._getWidth = function() {
            var root = this.root;
            var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
            return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
        };
    echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px。
    我实际按F12看的时候也看到上面图的宽度是100px。
    基于以上原因,参考大牛的解决方法,是要给这个图固定宽度。下面贴部分代码:

    $(document).ready(function(){ 
        $("#map").css('width',$("#chart").width()); //给图设置固定宽度,div chart是第一个tab页面上面的某个图,宽度布局与map一致                   
        require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });
            require(
                [
                    'echarts',
                    'echarts/chart/map'
                ],
           function (ec) {  
                   
              var myChart = ec.init(document.getElementById('map'));

    PS:根据实际需要选取其他div宽度进行设置。
        还可同时设置宽度、高度
    var width = $("参考图ID").width();
    var height = $("参考图ID").height();
    $("#目标图ID").css("width", width).css("height", height);
    --------------------- 


     

    展开全文
  • 问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。添加window自适应方法不管用,如下: mychart.setOption(option); $(window).resize(function() { //重置容器高宽 mychart.resize(); });...

    问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。


    添加window自适应方法不管用,如下:

     mychart.setOption(option);
     $(window).resize(function() { //重置容器高宽 mychart.resize(); });

    各种搜索这个问题,找到了方法。

    先借鉴大牛解释出现这个问题的原因:

    查了一下echarts源码,发现了这个
    Painter.prototype._getWidth = function() {
            var root = this.root;
            var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
            return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
        };
    
    echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px。
    我实际按F12看的时候也看到上面图的宽度是100px。

    基于以上原因,参考大牛的解决方法,是要给这个图固定宽度。下面贴部分代码:

    $(document).ready(function(){ 
    	$("#map").css('width',$("#chart").width()); //给图设置固定宽度,div chart是第一个tab页面上面的某个图,宽度布局与map一致				   
    	require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });
            require(
                [
                    'echarts',
                    'echarts/chart/map'
                ],
           function (ec) {  
    	   		
              var myChart = ec.init(document.getElementById('map'));

    PS:根据实际需要选取其他div宽度进行设置。
        还可同时设置宽度、高度
    var width = $("参考图ID").width();
    var height = $("参考图ID").height();
    $("#目标图ID").css("width", width).css("height", height);


    展开全文
  • 解压密码:RJ4587 之前我们分享过很多不错的jQuery图表和HTML5图表了,比如jQuery...今天我们要分享一款基于jQuery和Bootstrap的柱形图表,它的特点是可以同时展示多组数据,并且可以显示每组数据的百分比,比较直观。
  • 甘特图图表显示了项目的任务,开始日期,持续时间,完成百分比和资源。 甘特图图表可用于使用百分比完成阴影和垂直的“今天”线来显示当前计划状态。 图例可用于根据数据值对任务进行分组或过滤。 概述 甘特图是一...
  • chartContainer用来存放Echart图,设置宽高100%时出现Echart图没有铺满div需要强行设置宽高pxecharts的源码中计算宽度时:Painter.prototype._getWidth = function() {var root = this.root;var stl = root....

    chartContainer用来存放Echart图,设置宽高100%时出现Echart图没有铺满div

    需要强行设置宽高px

    echarts的源码中计算宽度时:

    Painter.prototype._getWidth = function() {

    var root = this.root;

    var stl = root.currentStyle || document.defaultView.getComputedStyle(root);

    return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;

    };

    原因在于echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px

    原文:https://www.cnblogs.com/nje19951205/p/12029739.html

    展开全文
  • (为了让大家有更直观的感受,基础图表篇系列文章里的图表都是借助 Excel 生成)按套路,咱们还是先看官方解释:饼图英文学名为 Sector Graph, 又名 Pie Graph。仅排列在工作表的一列或一行中的数据可以绘制到饼图中...
  • VB成绩统计饼图,生成圆形图表,圆饼百分比图表的例子,这种图表相信大家见多了,这个例子介绍了VB简单生成圆饼图的方法,对初学VB的朋友会有帮助,通过这个图表,你可以了解绘图、填充、按比例分配、绘制扇形等是...
  • 层级过高,在小程序端加上canvas2d="true"可以解决手机上显示的问题,但是同时在微信开发者工具上就会出现手机上层级的问题,相反,去掉标签上的属性canvas2d=“true”,开发者工具回复正常,而手机运行就又出问题了...
  • 这次我们要分享一款非常富有创意的jQuery图表插件,这款jQuery环形百分比图表插件有以下特点:1.图表外观是环形的,因此也十分特别。2.图表数据有百分比显示,...3.鼠标滑过环形时,将突出显示该项数据,并显示百分比
  • 最简单的方法把引入组件的v-show改为v-if
  • 动态显示图表特效

    2021-04-04 01:20:39
    源码CHCircleGaugeView,CHCircleGaugeView可以通过配置不同数字和颜色动态显示图表。颜色通过颜色自定义视图进行配置。数值通过滑动条拖动设置。可以设置测量标尺在图形内部或外部显示
  • 如何不显示图表中0%的项相信许多小伙伴不想让图表中为0%的项显示(毕竟大多数情况下没有太多意义)那如何不显示呢?废话不多说(这是龚春红老师教我的)上图片这里图表0%的没必要显示,我们可以添加一行辅助行(机型...
  • Excel VBA:设置图表系列格式

    千次阅读 2020-01-13 14:53:23
    可使用本方法快速设置图表的格式,而不必逐个设置所有属性。本方法是非交互式的,并且仅更改指定的属性。 语法 表达式.ChartWizard(Source, Gallery, Format, PlotBy, CategoryLabels, SeriesLabels, HasLegend, ...
  • excel 2007饼图中如何即显示数值又显示百分比试过:双击图表,没有用;还有找不到 图表选项,多谢,急需。爱不如宠,宠不如懂。宠的多了就会放肆,忍的多了就会怨恨,所以爱要懂得分寸。在图标向导第3步数据标志选项...
  • JS插件实现图表显示(曲线图表、柱形图表、饼状图表)
  • 那么问题来了: 以上解决了change事件对div图表容器的切换显示内容,但是问题是切换后不显示图表,控制台报错:“Can't get dom width or height”,检查了遍div容器是设置了大小的,上网一查才知道是因为echarts...
  • CSS+背景图片实现百分比图表特效代码
  • 我们在做excel表格饼图时候有没有发现,比如名称然后数量,但是在饼图一般显示百分比,实际的数目没有显示。或者是直接显示数目,大家有没有想想数目和百分比同时显示呢?方法:1、饼图工具在写报告的时候经常会遇到...
  • 来了,来了,它来了,图表教程会迟到,但永远不会缺席!在一个月前,我们联系到公众号PK阿锴主理人王培锴,经过双方反复的推敲,终于完成了这篇PPT图表秘笈。希望这篇文章能给你一些小小启发,文末有一份实用的图表...
  • echarts图表y轴刻度数字过大显示不全

    万次阅读 2019-07-22 11:50:00
    echarts的grid属性中有个containLabel参数,格式为boolean类型,默认是false. containLabel 为false的时候: grid.leftgrid.rightgrid.topgrid.bottomgrid.widthgrid.height决定的是由坐标轴形成的矩形的尺寸和...
  • ECharts 图表Y轴数值仅整数显示设置

    千次阅读 2020-10-14 15:54:12
    设置成1保证坐标轴分割刻度显示成整数。 { minInterval: 1 } 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
  • 可以知道明显是存放echart图表的盒子宽高问题,echart可以显示,说明echart引入是没有问题的,去掉v-show则不存在该问题,说明是在切换v-show时,echart渲染获取宽高的时机存在问题,即当我们设置v-show时,DOM没有...
  • pyecharts 实现显示数据为百分比的柱状图 效果见 https://blog.csdn.net/seakingx/article/details/105135110 增加了 tooltips 的显示修改.
  • 本期记录一下图表的一般设置图表样式设置以及特定图表设置 上一篇:MPAndroidChart的详细使用——ValueFormatter和AxisValueFormatter接口的使用 下一篇:MPAndroidChart的详细使用——图例的详细设置 刷新 这两...
  • 图表显示部分系列

    2019-10-12 09:27:27
    var vanchart=FR.Chart.WebUtils.getChart...//获取chart0控件的第一个图表,即柱形图 vanchart.setSeriesVisible([0,1]);//显示柱形图的系列 1 和系列 2 1. 版本 设计器版本 JAR 包版本 9.0 20...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,247
精华内容 24,898
关键字:

如何设置图表显示百分比