在echarts中图例legend和坐标系grid实现左右布局实例
更新时间:2020年5月17日 00:05 点击:2721
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实现左右布局实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
echarts实现获取datazoom的起始值(包括x轴和y轴)
这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 这篇文章主要为大家详细介绍了vue echarts实现柱状图动态展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11关于微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
这篇文章主要介绍了微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2022-07-18- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
- 这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-11
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下...2015-12-28- 这篇文章主要为大家详细介绍了vue+echarts实现堆叠柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-05
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06
- 这篇文章介绍了echarts实现饼图与样式设置的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2022-06-07
jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法...2016-04-06Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04- 这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09
- 这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25
- 这篇文章主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-19