echarts 图例两行展示

昨天我们公司产品提了一个需求，一定要把折线图的图例做两行展示，而却还让两行图例对齐。如图：

我看了一下官网的API还真有关于这个的设置。那么咱们就看一下关于echarts的图例的API吧。

legend.type (图例的类型) plain （普通图例，缺省就为普通图例。scroll 可滚动翻页的图例。当图例数量较多时可以使用。）

legend.zlevel :zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

legend.left :图例组件离容器左侧的距离

legend.top :图例组件离容器上侧的距离

legend.right : 图例组件离容器右侧的距离

legend.bottom : 图例组件离容器下侧的距离

legend.width : 图例组件的宽度。默认自适应。注意此时的legend.width并不是某一个图例的宽度。此width是图例组件全部的宽度，它可以控制全部图例宽度，我们可以用这个属性让图例超过一个固定宽度为两行展示，但不能设置某一个图例文字的宽度。

legend.orient ：图例列表的布局朝向。

legend.align ：图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，及为 'right'。

legend.padding ：图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

legend.itemGap ：图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔

legend.itemWidth：图例标记的图形宽度。注意legend.itemWidth 这个属性是用来设置某一个图例标记的宽度legend.itemHeight ：同itemWidth

legend.formatter ：用来格式化图例文本，支持字符串模板和回调函数两种形式。

legend.selectedMode ：图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。

legend.inactiveColor : 图例关闭时的颜色。

legend.selected :图例选中状态表。

legend.data[i] : 图例的数据数组

本次的重点来了

legend.textStyle : 图例的公用文本样式

大家可以在API中看到这个属性。legend.textStyle 中有一个属性是设置图例文字宽的，那就是legend.textStyle.width。但是用这个属性是必须要用legend.textStyle.rich 这个属性。要不然legend.textStyle.width这个属性不会生效。同理legend.textStyle.height也是如此。

此时会有人发现按照API上去写代码，最后并没有达到你要的效果。两行显示并且垂直对齐。那是因为用这个属性时还需要另一个属性的配合，这个属性就是legend.formatter 。

你需要定义一个

 formatter: ['{a样式名称|{name}}','{b样式名称|{name}}',].join('\n'),

rich: {a样式名称: {width：100，color: 'red',lineHeight: 10},b样式名称: {backgroundColor: {image: 'xxx/xxx.jpg'},height: 40},...}

此时formatter中的 {a样式名称|} 会通过管道符自动匹配自定义的rich中{a样式名称}的样式，此时就可以设置图例文字的宽度了。这样就能得到我们想要的效果了

这就是我们想要的样式了

echarts 图例两行展示相关推荐

【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
目录先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
echarts 图例（legend icon）图标自定义的几种方式
echarts 图例(legend icon)图标自定义的几种方式前言一.默认图例项的 icon 二.使用图片链接或者base64 图片三.使用矢量路径 1-3.以上例子的DEMO 四.创 ...
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
ASP.Net绑定Sql数据源用echarts图表来展示数据
ASP.Net绑定Sql数据源用echarts图表来展示数据这里我们需要先学会ajax请求和网页的echarts图的使用不会的同学也没关系可以看我接下来的内容我会一步步的来讲解的首先大家可以先从 ...
echarts 仪表盘图展示百分比
echarts 仪表盘图展示百分比效果图如下: 背景图一加,效果就好看多了代码: let myChart = echarts.getInstanceByDom(document.getElemen ...
echarts图例默认只显示某几个，其余图例手动控制显示
1.首先,我们的需求是默认只显示一条平均分图例,我想看哪个的再手动点亮图例按钮展示,效果如下: 默认: 手动点亮图例: 涉及代码如下: // legendData表示我这里的分组数组let selec ...
echarts 实时数据展示
echarts 实时数据展示 1. 构建一个web项目完成从后台拉取MySQL的数据到前端的准备工作,我自己是用的ssm框架,这里是属于web的工作,不过多赘述. 2.先写一个简单的echart ...
Echarts地图不展示南海九段线/南海诸岛问题解决
改之前: 改之后:(因为没有数据颜色较浅,将就看吧) 1.第一种情况:如果map类型为中文'中国'/地图名称,而不是china 进入这个路径文件:\node_modules\echarts\lib\c ...
Echarts 图例分两行显示
画折线图的时候遇到了一个问题,注意左下角那个图: 那个图例,丑到爆啊,作为强迫症的我忍不了他!必须改掉!!! 看了下,解决方法如下: legend: [{data: ['意大利', '巴西', '西班 ...

echarts 图例两行展示

echarts 图例两行展示相关推荐

最新文章

热门文章

echarts 图例 两行展示

echarts 图例 两行展示相关推荐

最新文章

热门文章

echarts 图例两行展示

echarts 图例两行展示相关推荐