v-charts legend设置排列对齐的方法

最新推荐文章于 2025-06-06 09:06:33 发布

走_开

最新推荐文章于 2025-06-06 09:06:33 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue2 文章标签： v-charts

本文链接：https://blog.youkuaiyun.com/believet93/article/details/90045674

vue2 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了在v-charts中遇到图例排列不齐的问题，并探讨了解决方案。通过设置v-charts的extend属性调整图例布局，尝试利用e-charts的数组形式配置图例，但未生效。最后，采用统一图例标签长度的方法实现对齐，包括截断过长标签和补充短标签的空格。文章呼吁分享更优的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如下手机端的图表，可以看到legend排列不齐

2、通过设置v-charts的extend属性

html代码如下：

<ve-line :data="chartData" :settings="chartSettings" :extend="chartExtend" legend-position="bottom"></ve-line>

js代码如下：

        chartExtend: {
          series: {},
          tooltip: {},
          grid: {
            right: '20%',
          },
          legend: {
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}℃'
            }
          }
        },

3、查看e-charts的配置项legend，可以使用数组形式为每一个图例图标项单独配置，具体如下

legend: [{
        icon: 'rect',
        top: 50,
        data:['视频广告','直接访问','搜索引擎']
    },{
        data:['邮件营销','联盟广告']
    }],

4、此时修改v-charts中的legend属性为数组形式，发现配置并没有生效，图例变成了默认样式

        chartExtend: {
          series: {},
          tooltip: {},
          grid: {
            right: '20%',
          },
          legend: [{
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
            data: ['那什么的系统环境温度', '那什么的当前温度']
          },{
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
            data: ['不知道进水温度', '知道出水温度']
          }],
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}℃'
            }
          }
        },

5、那么，仍然需要v-charts的图例对齐，该怎么做？此处我的做法是将图例的标签文字长度修改成一样的，具体做法就是定好图例标签长度，过长的去掉尾部，短的在后面补空格，此时需要注意修改的地方还有data中的参数

chartData: {
          columns: ['时间', '那什么的系统环境温度', '那什么的当前温度   ', '不知道进水温度         ', '知道出水温度     '],
          rows: [{
              '时间': '2019/1/1',
              '那什么的系统环境温度': 13,
              '那什么的当前温度   ': 10,
              '不知道进水温度         ': 32,
              '知道出水温度     ': 4
            },
            {
              '时间': '2019/1/2',
              '那什么的系统环境温度': 35,
              '那什么的当前温度   ': 32,
              '不知道进水温度         ': 6,
              '知道出水温度     ': 4
            },
            {
              '时间': '2019/1/3',
              '那什么的系统环境温度': 29,
              '那什么的当前温度   ': 26,
              '不知道进水温度         ': 16,
              '知道出水温度     ': 4
            },
            {
              '时间': '2019/1/4',
              '那什么的系统环境温度': 17,
              '那什么的当前温度   ': 14,
              '不知道进水温度         ': 19,
              '知道出水温度     ': 4
            }
          ]
        },