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

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}]},

6、此方法并不是很好的解决办法，欢迎各位提出更好的解决方案。

v-charts legend设置排列对齐的方法相关推荐

php如何水平对齐所有星星,css怎么设置水平对齐
css设置水平对齐的方法:1.使用"text-align: center;"样式设置文本元素水平居中对齐:2.使用"margin: auto;"样式设置块状元素 ...
如何让div靠右_css怎么设置右对齐？
css设置右对齐的方法:1.使用cssposition属性实现右对齐.2.通过float属性实现右对齐.3.通过text-align属性实现右对齐. 通过css设置右对齐方法详解: 1.通过css的p ...
关于图标和文字对齐的方法整理。
关于图标和文字对齐的方法整理. 标签的图标修饰很常见.但是通常都会遇到小图标和文字对齐的若干问题.尤其是图标和文字字号不一致的时候,怎么对齐都觉得不自然. 当然我今天不讨论自不自然的问题. 网上关于这 ...
摩托罗拉Z8 短信铃声设置和主题安装方法
摩托罗拉Z8 短信铃声设置和主题安装方法 .P1H/|2x-u3p"]Mo爱好者论坛控制面板--->文件夹---->更多----->编辑-------->信息---- ...
PyQt5 技术篇-设置alignment对齐方式。Qt Designer设置文本对齐方式。居中、左对齐、右对齐、上对齐、下对齐。
通过 alignment 设置,展开后可以设置水平方向或垂直方向的对齐方式. PyQt5 设置文本对齐方法: self.label.setAlignment(QtCore.Qt.AlignRight| ...
linux系统怎么设置开机密码,Linux_Linux系统怎么设置开机密码？Linux设置开机密码的方法，为了保证Linux系统的安全，应 - phpStudy...
Linux系统怎么设置开机密码?Linux设置开机密码的方法为了保证Linux系统的安全,应该给系统设置开机密码.注意,"开机密码"和"登录密码"是不同的.本 ...
html外边框设为虚线,科技常识：html设置虚线边框的方法
今天小编跟大家讲解下有关html设置虚线边框的方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html设置虚线边框的方法的相关资料,希望小伙伴们看了有所帮助. 用到CSS样式和HTM ...
在Raspberry Pi上设置Docker的简单方法
by Ryan Gordon 通过瑞安·戈登(Ryan Gordon) 在Raspberry Pi上设置Docker的简单方法 (The easy way to set up Docker on a ...
图片和文字对齐的方法
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: base ...

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

v-charts legend设置排列对齐的方法相关推荐

最新文章

热门文章