Echarts按需引入后没有显示图例问题
因为Echarts官网的例子都是引入整个Echarts.js。如果使用按需引入对应模块就要记得引入legend模块,才能显示出图例。
例如这样:
require("echarts/lib/component/legend");
像我使用Bar,我所引用的模块有
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
// 引入legend模块
require("echarts/lib/component/legend");
如果要调整legend的位置,可以在legend同一级加上grid来调整相应的位置
例如:
legend: {
orient: "vertical", // 垂直排列
left: "right", // 像右对齐
data: ["未完成", "已完成", "已过期"]
},
grid: {
left: "3%", // 距离左边3%
right: "0",
bottom: "0",
top: "20%", // 顶部空出20%的空间,来显示legend
containLabel: true
},
Echarts按需引入后没有显示图例问题的更多相关文章
- vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined
vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...
- matplotlib画图无法显示图例 报错No handles with labels found to put in legend.
很久没有matplotlib了,今天画图的时候发现了一个很小的问题....明明加了legend(),图表会出来,却无法正常显示图例.最后发现只要在plt.plot()加label图例就可以正常显示了.
- matplotlib中的legend()—显示图例
源自 matplotlib中的legend()——用于显示图例 -- 博客园 http://www.cnblogs.com/yinheyi/p/6792120.html legend()的一个用法: ...
- echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- echarts之字符云tooltip显示混乱问题的解决办法
echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...
- Echarts 南海诸岛简图显示位置调整
最近需要echart同时显示海南岛和南海诸岛,开始想寻找南海诸岛的数据,经过查找,这种简图数据是没有的(china.js地图数据一一找过了),下图是echarts的一些示例,没有满足我们的要求 ...
- Echarts饼图更改颜色、显示数据且换行
var option = { title : { text: '数据来源', x:'center' }, tooltip : { trigger: 'i ...
- matplotlib中的legend()——用于显示图例
legend()的一个用法: 当我们有多个 axes时,我们如何把它们的图例放在一起呢?? 我们可以这么做: import matplotlib.pyplot as plt import numpy ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
随机推荐
- 手把手教你在CentOS 7.4下搭建Zabbix监控(转)
Linux系统版本:CentOS 7.4 1.安装前需要先关闭selinux和firewall. 1.1 [root@zabbix ~]# vi /etc/selinux/config 将SELINU ...
- Angular material mat-icon 资源参考_Social
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- linux 安装谷歌浏览器
1. 下载 rpm 包https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm2. 安装依赖包yum ins ...
- saltstack源码详解一
目录 初识源码流程 入口 1.grains.items 2.pillar.items 2/3: 是否可以用python脚本实现 总结pillar源码分析: @(python之路)[saltstack源 ...
- HTTP请求的常用方法有哪些
HTTP请求的常用方法有:GET方法.POST方法.HEAD方法.PUT方法.DELETE方法.CONNECT方法.OPTIONS方法.TRACE方法.下面本篇文章就给大家介绍具体介绍一下HTTP请求 ...
- Robot Framework_Ride(Settings)
Settings 不管是测试套件还是测试用例都会有一个“Settings>>”的按钮,因为它默认是被折叠起来的,所以,一般不太容易发现它,更不知道点击它之后是可以展开的 1.测试用例的 S ...
- flyway-Maven插件-configuration节点配置详解
<configuration> <driver>org.hsqldb.jdbcDriver</driver> <url>jdbc:hsqldb:file ...
- 在ubuntu10.10下安装Google谷歌拼音输入法
安装步骤如下:1.下载文件:sudo wget http://malu.googlecode.com/files/scim-googlepinyin.tar.gz(经测试,这个链接已经失效了,幸好有前 ...
- 九度oj题目1341:艾薇儿的演唱会
题目1341:艾薇儿的演唱会(40分) 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:522 解决:237 题目描述: 艾薇儿今天来到了中国,她计划两天后在哈尔滨举行一场个人的演唱会.由于 ...
- 45 Useful Oracle Queries--ref
http://viralpatel.net/blogs/useful-oracle-queries/ Here’s a list of 40+ Useful Oracle queries that e ...