在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中的迭代器漫谈
Feb 03 Python
Python实现的文本简单可逆加密算法示例
May 18 Python
python实时获取外部程序输出结果的方法
Jan 12 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
May 07 Python
Django之提交表单与前后端交互的方法
Jul 19 Python
Tensorflow累加的实现案例
Feb 05 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
Feb 07 Python
Python tkinter 下拉日历控件代码
Mar 04 Python
Python单例模式的四种创建方式实例解析
Mar 04 Python
解决jupyter notebook 出现In[*]的问题
Apr 13 Python
k-means 聚类算法与Python实现代码
Jun 01 Python
部署Django到阿里云服务器教程示例
Jun 03 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编写和读取XML的几种方式
2013/01/12 PHP
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python中使用np.delete()的实例方法
2021/02/01 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
自荐信格式
2013/12/01 职场文书
自我评价的写作规则
2014/01/06 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
请假条的格式
2014/04/11 职场文书
学习之星事迹材料
2014/05/17 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
公司更名通知函
2015/04/24 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang