专栏首页恩蓝脚本在echarts中图例legend和坐标系grid实现左右布局实例

在echarts中图例legend和坐标系grid实现左右布局实例

1、效果图

2、实现方法

将图例legend纵向排列(orient: ‘vertical’),宽度给150(width: 150),坐标系grid左侧距离200(left: 200),中间有50的边距

3、代码展示

grid: {
 left: 200
},
legend: {
    x: 'left',
    data: ['送风温度', '混风温度', '冷冻水送水温度', '冷冻水回水温度', '热水送水温度', '热水回水温度', '送风温度设定点', '风机速度','风机速度反馈','风阀开度'],
 inactiveColor: '#999',
 selectedMode: 'single',
 orient: 'vertical',
 width: 150,
 top: 50,
 borderWidth: 2,
 borderColor: 'blue',
 textStyle: {
 color: '#000'
 }
}

补充知识:Echarts中legend图例太多与title重叠问题

问题:由于legend图例太多导致与title的文字重叠

方法:像legend.data[i]中添加特殊字符串”,实现图里的换行

代码:加粗加下划线部分

legend: {
 x: 'left',
 data: ['送风温度', '回风温度', '室外温度', '室外湿度', '', '室内1温度', '室内1湿度', '室内2温度', '室内2湿度'],
 inactiveColor: '#999',
 selectedMode: 'single'
 }

以上这篇在echarts中图例legend和坐标系grid实现左右布局实例就是小编分享给大家的全部内容了,希望能给大家一个参考。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • php实现有序数组旋转后寻找最小值方法

    把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素。 例如数组{3,4,5,1,2}为...

    砸漏
  • android studio节省C盘空间的配置方法

    C:\Users\<电脑用户名 \的目录下,有这两个文件夹空间比较大,这两文件夹分别是 .AndroidStudioPreview3.2(不同版本的androi...

    砸漏
  • Excel技巧:Excel如何在透视报表做成表格形式?

    有人问道如何将透视表的字段分别显示在不同的列上面,也就是不要把所有的字段弄成大纲一样弄成一列。

    砸漏
  • python 学习总结2

      目前有两种表示温度的方法一种是摄氏度另一种是华氏度,摄氏度的结冰点为0度,沸点为100度将温度等分刻画,华氏度的结冰点为32度,沸点为212度将温度进行等刻...

    py3study
  • tf.convert_to_tensor()

    该函数将各种类型的Python对象转换为张量对象。它接受张量对象、数字数组、Python列表和Python标量。例如:

    于小勇
  • Tensorflow实现将标签变为one-hot形式

    pandas中get_dummies()函数可以将字段进行编码,转换为01形式,其中prefix可以为每个新展开的列名添加前缀。

    砸漏
  • 二手房价格及信息爬取

    某家网站里有新房、二手房、租房等待。如果买房,尤其是在北京的首套,可能二手房是选择之一,那我就针对二手房研究一下。

    朱小五
  • 活动预告 | 2020 Techo Park开发者大会,优图实验室与你共同聆听技术的回响

    12月19日至20日,由腾讯主办的2020 Techo Park开发者大会将在北京举办。作为一个专注于前沿技术研讨的非商业大会,本次大会致力于开发者的能力成长和...

    优图实验室
  • Jerry入职SAP成都研究院14周年纪念日

    2007年1月11日,我以实习生的身份,入职了SAP成都研究院。因为当时研究院刚刚于2006年成立,2007年1月份入职的新人很多,所以我进入SAP之后的第一场...

    Jerry Wang
  • 有赞前端质量保障体系

    最近一年多一直在做前端的一些测试,从小程序到店铺装修,基本都是纯前端的工作,刚开始从后端测试转为前端测试的时候,对前端东西茫然无感,而且团队内没有人做过纯前端的...

    测试开发社区

扫码关注云+社区

领取腾讯云代金券