资讯专栏INFORMATION COLUMN

记录一次用echarts插件画饼图时遇到的问题.

Galence / 2908人阅读

摘要:近期在开发中遇到一个问题就是用插件画饼图时图例是横向排布的时候如果换行了如何让图例图标对齐由于网上关于这个的处理方案具体实现细节的解答比较少所以写出来问题展示图如下如图所示第二行的图例并没有和第一行的图例对齐这是因为插件在图例横向排列的时候

近期,在开发中遇到一个问题,就是用echarts插件画饼图时,图例是横向排布的时候,如果换行了,如何让图例图标对齐?由于网上关于这个的处理方案具体实现细节的解答比较少,所以写出来.
问题展示图如下:

如图所示,第二行的图例并没有和第一行的图例对齐.这是因为插件在图例横向排列的时候,自动根据图例的文字多少自动排列.

开始查了很多资料,百度了下,也没找到好的方法.然后试着用富文本处理下,没有处理好.最后在网上求助网友,终于解决了.

方案一: 设置图例文字的宽度,这里设置图例文字的宽度是需要用富文本处理的.不然设置是没有作用的.(感谢网友:https://segmentfault.com/u/hu...提供帮助).
本来的代码: (不对齐的)

legend:{
                show: true,
                type: "plain",
                itemGap: 10,
                bottom: "5%",
                orient: "horizontal",
                data:[
                        {
                            name: "无抵押",
                            icon: "circle",
                            textStyle:{
                                color: "black"
                            }
                        },
                        {
                            name: "有抵押",
                            icon: "circle",
                            textStyle:{
                                color: "black"
                            }
                        },
                        {
                            name: "宝单保",
                            icon: "circle",
                            textStyle:{
                                color: "black"
                            }
                        },
                        {
                            name: "万商贷",
                            icon: "circle",
                            textStyle:{
                                color: "black"
                            }
                        },
                        {
                            name: "O2O",
                            icon: "circle",
                            textStyle:{
                                color: "black"
                            }
                        },{
                        name: "O2O1666",
                        icon: "circle",
                        textStyle:{
                            color: "black"
                        }
                    },{
                        name: "O2O25665",
                        icon: "circle",
                        textStyle:{
                            color: "black"
                        }
                    },
                        {
                            name: "直销",
                            icon: "circle",
                            textStyle:{
                                color: "black"
                            }
                        }
                ]

            },
            

利用富文本设置宽度:

legend:{
                show: true,
                type: "plain",
                bottom: "2%",
                orient: "horizontal",
                formatter: function( name ) {
                     return "{a|" + name + "}";
                    },
                textStyle: {
                        color: "#ca8622",
                    backgroundColor: "red",               
                    rich: {
                            a: {
                                width: 90
                            }
                    }
                },
                

注意需要用 formatter设置去指定富文本,否则是没有作用的.

方案二: 在dada中加入空字符串(此方法好像不大正统,斟酌使用...)
首先设置图例排列为纵向排列,然后看下你需要排几行.就隔几个加空格,比如我需要两行.就隔开2个.

legend:{
                show: true,
                type: "plain",
                bottom: "2%",
                orient: "vertical",
                data:[
                        {
                            name: "无抵押大幅度",
                            icon: "circle",                          
                        },
                        {
                            name: "有抵押",
                            icon: "circle",                          
                        },
                        {
                            name: ""
                        },
                        {
                            name: "万商贷",
                            icon: "circle",
                        },
                        {
                            name: "O2O",
                            icon: "circle",
                        },
                        {
                            name: ""
                        },
                        {
                            name: "直销",
                            icon: "circle",
                        }
                ]

            },
            

效果图:

当然还有一种最渣的方案:文字后面加空格,这种方案太渣了就不说了.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88677.html

相关文章

  • 基于canvas实现高性能、跨平台股票图表库--clchart

    摘要:什么是是一个基于创建的简单高性能和跨平台的股票数据可视化开源项目。支持以及和等平台。而针对股票等有价证劵特定的图表库有和等项目,这些图表库对股票绘图已经做了一些非常专业的处理及优化了,但是他们均基于来绘图。 什么是 ClChart? ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台...

    baihe 评论0 收藏0
  • 基于canvas实现高性能、跨平台股票图表库--clchart

    摘要:什么是是一个基于创建的简单高性能和跨平台的股票数据可视化开源项目。支持以及和等平台。而针对股票等有价证劵特定的图表库有和等项目,这些图表库对股票绘图已经做了一些非常专业的处理及优化了,但是他们均基于来绘图。 什么是 ClChart? ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台...

    SnaiLiu 评论0 收藏0
  • 基于canvas实现高性能、跨平台股票图表库--clchart

    摘要:什么是是一个基于创建的简单高性能和跨平台的股票数据可视化开源项目。支持以及和等平台。而针对股票等有价证劵特定的图表库有和等项目,这些图表库对股票绘图已经做了一些非常专业的处理及优化了,但是他们均基于来绘图。 什么是 ClChart? ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台...

    PAMPANG 评论0 收藏0
  • 基于canvas实现高性能、跨平台股票图表库--clchart

    摘要:什么是是一个基于创建的简单高性能和跨平台的股票数据可视化开源项目。支持以及和等平台。而针对股票等有价证劵特定的图表库有和等项目,这些图表库对股票绘图已经做了一些非常专业的处理及优化了,但是他们均基于来绘图。 什么是 ClChart? ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台...

    PAMPANG 评论0 收藏0
  • 如何在AngularJS中使用插件

    摘要:开发我认为在中使用其他插件的最好方法是使用指令的形式在项目中引入,这样做有许多好处,其中最明显的好处便是当项目中需要引入多种插件时可以使用各种不同的指令将他们分离并且还具有一次开发各处使用的组件化特点。 在实习期间,由于项目的需求,我第一次系统的使用了angular这一优秀的js框架,其所拥有的许多优秀特性极大的方便了项目的开发,然而在开发中也遇到过不少的问题,现在趁自己被抓回学校无所...

    baoxl 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<