在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实现左右布局实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
利用pyecharts实现地图可视化的例子
pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echarts 生成的图可视化效果非常棒,pyecharts 是为了与 Python 进行对接,方便在 Python 中直接使用数据生成图. 今天我们就用pyecharts和jupyter notebook实现地图数据的可视化. pyecharts v0.3.2以后,pyecharts 将不再自带地图 js 文件.如用户需要用到地图图表,可自行安装对应的地图文件包. 下面介绍
-
实现ECharts双Y轴左右刻度线一致的例子
不一致的情况如下图: 修改成一致的情况如下图: 代码如下: yAxis : [ { type : 'value', name : '人数', //splitLine:{show:false}, axisLabel : { formatter: '{value} 个', textStyle:{color: '#A23400'}//#A23400 purple }, axisLine:{ lineStyle:{color:'#A23400',width:'1'} //y轴坐标轴颜色 #A23400
-
Vue Echarts实现可视化世界地图代码实例
Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js
-
在echarts中图例legend和坐标系grid实现左右布局实例
1.效果图 2.实现方法 将图例legend纵向排列(orient: 'vertical'),宽度给150(width: 150),坐标系grid左侧距离200(left: 200),中间有50的边距 3.代码展示 grid: { left: 200 }, legend: { x: 'left', data: ['送风温度', '混风温度', '冷冻水送水温度', '冷冻水回水温度', '热水送水温度', '热水回水温度', '送风温度设定点', '风机速度','风机速度反馈','风阀开度'],
-
Echarts中legend属性使用的方法详解
目录 orient x/y(left/top) 样式设置 itemGap itemHeight textStyle selected data 补充:自定义legend属性 总结 Echarts的legend属性是对图例组件的相关配置 而legend就是Echarts图表中对图形的解释部分: 其中legend自身常用的配置属性如下: orient 设置图例的朝向 属性值: vertical // 垂直显示或者horizontal // 水平显示 legend: { orient: 'vertic
-
解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. 当avoidLabelOverlap设置为false时会出现以下情况 改为true之后就不会重叠 代码如下 var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%
-
matplotlib图例legend语法及设置的方法
1.图例legend基础语法及用法 legend语法参数如下: matplotlib.pyplot.legend(*args, **kwargs) Keyword Description loc Location code string, or tuple (see below).图例所有figure位置 prop the font property字体参数 fontsize the font size (used only if prop is not specified) markersca
-
python可视化plotly 图例(legend)设置
目录 一.图例(legend) 二.update_layout(legend={}) 相关参数及示例 一.图例(legend) import plotly.io as pio import plotly.express as px import plotly.graph_objects as go from plotly.subplots import make_subplots import pandas as pd import numpy as np # 设置plotly默认主题 pio.
-
R语言ggplot2设置图例(legend)的操作大全
目录 基本箱线图(带有图例) 移除图例 修改图例的内容 颠倒图例的顺序 隐藏图例标题 修改图例中的标签 修改data.frame的factor 修改标题和标签的显示 修改图例的框架 设置图例的位置 隐藏斜线 总结 本文在 http://www.cookbook-r.com/Graphs/Scatterplots_(ggplot2)/ 的基础上加入了自己的理解 图例用来解释图中的各种含义,比如颜色,形状,大小等等, 在ggplot2中aes中的参数(x, y 除外)基本都会生成图例来解释图形, 比
-
利用Echarts实现图例显示百分比效果
目录 效果图 主要代码 全部代码 echarts图例显示百分比 效果图 主要代码 全部代码 secondChart = () => { //datas的数据是接口拿到的数据 const { texture } = this.state; const datas = texture; var option = { color: [ "#3774e5", "#4ea9d9", "#b041ef", "#a25fea", &q
-
vue实现echarts中的仪表盘
本文实例为大家分享了vue实现echarts中的仪表盘的具体代码,供大家参考,具体内容如下 最终结果 一.安装 1. 首先需要安装echarts依赖包 npm install echarts -S 2. 或者使用国内的淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 二.创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.proto
-
echarts中X轴显示特定个数label并修改样式的方法详解
目录 前言 需求: 必须显示起始日期和终止日期 需求: 由于画布限制,只让显示起始和终止日期,或者再加上中间日期 需求: 将起始和终止刻度限定在轴线范围内,不允许现实超过轴线 总结 前言 在使用echarts绘图时可能遇到一些特别的需求,如,当x周表示日期且数据较多(如三个月,按天统计),此时如果按照echarts的默认配置,则会根据空间剩余的大小自动计算最终显示有限的几个不重叠的label 需求: 必须显示起始日期和终止日期 echarts默认属性会导致如果重叠,最大值和最小值会被隐藏,首先要
-
Python Grid使用和布局详解
本文实例为大家分享了Python Grid使用和布局的具体代码,供大家参考,具体内容如下 #!/usr/bin/env python import vtk # 这个示例主要用于将不同的图像对象显示到指定的Grid中 def main(): colors = vtk.vtkNamedColors() # Set the background color. colors.SetColor("BkgColor", [51, 77, 102, 255]) titles = list() tex
随机推荐
- 详解正则表达式及Linux三大文本处理工具
- 正则表达式中\w不能识别中文
- ajax 防止用户反复提交的2种解决方案
- PowerShell管理Win Server 2008 R2
- 使用隐藏的new来创建对象
- iOS 懒加载的使用实例代码
- Python如何获取系统iops示例代码
- ASP.NET 前后台调用方法
- js采用map取到id集合组并且实现点击一行选中一行
- ASP.NET 2.0中的页面输出缓存
- Python实现随机选择元素功能
- IBM WebSphere源代码暴露漏洞
- 详解Docker学习之用commit命令创建镜像
- Linux中巧妙安装红旗紫光输入法
- CSS顶级技巧大放送,div+css布局必知
- chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
- 深入VC回调函数的使用详解
- MySQL的查询缓存机制基本学习教程
- jquery定时滑出可最小化的底部提示层特效代码
- js全选实现和判断是否有复选框选中的方法