首页 > 其他分享 >echarts中legend实现排列对齐

echarts中legend实现排列对齐

时间:2023-08-01 12:56:02浏览次数:45  
标签:换行 legend width params 对齐 echarts

问题

当图表中的 legend 过多的时候,就需要考虑 legend 进行换行,但是换行之后,图例就会无法对齐。

解决

legend: {
  icon: "rect",
  width: "80%",
  itemWidth: 6,
  itemHeight: 6,
  bottom: 0,
  textStyle: {
    color: "#333",
    rich: {
      a: {
        width: 100,
        height: 12,
        backgroundColor: "transparent", // 一定要设置,不然不生效
        padding: [0, 20, 0, 0],
      },
    },
  },
  formatter: (params) => {
    return `{a|${params}}`;
  },
},

效果如下

标签:换行,legend,width,params,对齐,echarts
From: https://www.cnblogs.com/ZerlinM/p/17596161.html

相关文章

  • 微信小程序使用echarts动态设置宽高
    微信小程序中动态设置了echarts的高度,但是canvas变形,并没有重新resize原因chart获取不到父组件的宽高,小程序里获取宽高用的是wx.createSelectorQuery(),echarts里resize的时候,并没有调用这个API,肯定无法重置宽高。解决if(chart){constgetWindowInfo=uni.getWindowInf......
  • vue循环生成echarts图表
    1.效果图2.引入echartsnpminstallecharts--save3.main.js全局引入4.页面data数据是从后台接口中返回的,需要通过watch监听来获取created方法中获取到的数据。用mounted由于是异步调用,是获取不到created中的数据的。4.后台数据我这里是根据实际业务场景返回的map......
  • echarts 自定义提示框
    consttooltip=(params,echartsBarData)=>{constresult=params.map((item,index)=>{conststr=item.name.substring(0,1);if(echartsBarData[index].drugNameCosList){constdata=echartsBarData[index].drugNameCosList.filter(......
  • 【Python】使用 pyecharts 模块绘制动态时间线柱状图 ① ( 列表排序 | 使用 sorted 函
    文章目录一、列表排序1、使用sorted函数对容器进行排序2、使用list.sort函数对列表进行排序3、使用list.sort函数对列表进行排序-设置排序函数4、使用list.sort函数对列表进行排序-设置lambda匿名排序函数pyecharts画廊网站:https://gallery.pyecharts.org/#/......
  • 语音合成技术汇总1:Glow-TTS:通过单调对齐实现文本到语音的生成流
    今天开始开一期语音合成经典论文的翻译Glow-TTS:通过单调对齐实现文本到语音的生成流摘要:最近,文本到语音(Text-to-Speech,TTS)模型,如FastSpeech和ParaNet,被提出以并行方式从文本生成mel频谱图(mel-spectrograms)。尽管并行TTS模型具有优势,但它们不能在没有自回归TTS模型作为外部对齐......
  • Vue中使用Echarts可视化图表
    1、首先在项目中安装Echarts1npminstallecharts2npminstallecharts--save 2、在项目main.js中全局引入1importechartsfrom'echarts'2//挂载到vue原型上3Vue.prototype.$echarts=echarts 1//全局引入echarts2import*asechartsfrom'echar......
  • Echarts中柱状图的基本设置
    Echarts-去掉图表横纵坐标轴刻度线效果图去掉前:去掉后:axisTick:{show:false}X轴Y轴文字颜色和大小的设置axisLabel:{textStyle:{color:"#f9f9f9",fontSize:12}}X轴Y轴刻度线的颜色和宽度的设置:axisLine:{show:true,//......
  • 内存对齐
    一.内存对齐内存对齐的好处某些情况下,可能需要多次访存,比如64位CPU,每次最多可获取8B,现在有一个8B长的变量,如果没有对齐,可能前6B存在前一个地址,后2B存在另一个地址,两次才能取出,如果对齐,那就只需要访存一次可能会破坏访存的原子性,常见的就是longlong并发时的错误某些ARM......
  • echarts 实时动态修改markline
    效果图: 如果要固定显示markline的值就写在series.markLine.data数组里。 我这里的markline的值是通过websocket返回的,数据发生变化时,markline的值也跟着变化监听到websocket返回值时:leto=myChart.getOption()//mychart是创建的echarts实例getOption获取当前实例......
  • echarts记录篇(三 ):使用横向柱状图实现左侧分类对齐右侧显示数据效果及数据过多加滚动
    一、效果如下: 二、直接上代码上一篇已经说过左侧分类,右侧数据对齐的方法,如果需要移步上篇,此篇主要是纵向滚动条功能,代码如下:dataZoom:[{type:"slider",realtime:true,//拖动时,是否实时更新系列的视图startValue:0,endVal......