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


Posted in Python onMay 16, 2020

1、效果图

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

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的文字重叠

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

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

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

代码:加粗加下划线部分

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

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

Python 相关文章推荐
跟老齐学Python之有点简约的元组
Sep 24 Python
Python自动连接ssh的方法
Mar 07 Python
python以环状形式组合排列图片并输出的方法
Mar 17 Python
Python psutil模块简单使用实例
Apr 28 Python
python 队列详解及实例代码
Oct 18 Python
python实现决策树
Dec 21 Python
python实现Floyd算法
Jan 03 Python
python学习开发mock接口
Apr 28 Python
python 实现将Numpy数组保存为图像
Jan 09 Python
Python趣味实战之手把手教你实现举牌小人生成器
Jun 07 Python
Python实现视频自动打码的示例代码
Apr 08 Python
使用pd.merge表连接出现多余行的问题解决
Jun 16 Python
Python如何使用PIL Image制作GIF图片
May 16 #Python
pyecharts调整图例与各板块的位置间距实例
May 16 #Python
通过Python实现一个简单的html页面
May 16 #Python
Python批量处理csv并保存过程解析
May 16 #Python
基于Python测试程序是否有错误
May 16 #Python
关于matplotlib-legend 位置属性 loc 使用说明
May 16 #Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
May 16 #Python
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
php调用c接口无错版介绍
2014/03/11 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python的Tqdm模块的使用
2018/01/10 Python
如何用python整理附件
2018/05/13 Python
对python中dict和json的区别详解
2018/12/18 Python
python装饰器练习题及答案
2019/11/01 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
2014年幼儿园元旦活动方案
2014/02/13 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
python分分钟绘制精美地图海报
2022/02/15 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL