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自定义格式 完成后的效果如 ...
随机推荐
- esp32 blink实验
#include<stdio.h>#include"freertos/FreeRTOS.h"#include"freertos/task.h"#in ...
- JavaScript DOM编程艺术 笔记(二)语句操作
操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...
- 编写高质量代码:Web前端开发修炼之道(四)
这一节是继上一节高质量的Javascript 7)编程实用技巧 1:弹性 从 一个标签区和内容区的实例(就是点击不同的标签菜单显示不同的内容块)来说明不需要每个tabmenu都设置onclick事件, ...
- MM 后台配置(转)
本文转自:https://www.cnblogs.com/yanglikun/p/4124797.html 一.全局配置 1.一般配置 SPRO->SAP NETWEAVER -> GEN ...
- 删除centos 7 系统自带的 openjdk
1. 查看是否系统自带openjdk. java -version 2. 查看jdk位置 rpm -qa | grep java 3. 删除jdk rpm -e --nodeps java--ope ...
- 动态时间规整DTW(Dynamic Time Warping )
动态时间规整DTW(Dynamic Time Warping ) 原文:https://blog.csdn.net/raym0ndkwan/article/details/45614813 算法笔记- ...
- (转)Linux运维MySQL必会面试题100道
老男孩教育Linux运维班MySQL必会面试题100道 (1)基础笔试命令考察 (要求:每两个同学一组,一个口头考,一个上机实战作答,每5个题为一组,完成后换位) 1.开启MySQL服务 2.检测端口 ...
- selenium+Python(事件)
1.操作测试对象前面讲到了不少知识都是定位元素,定位只是第一步,定位之后需要对这个元素进行操作.鼠标点击或者键盘输入,这要取决于我们定位的是按钮还输入框.一般来说,webdriver 中比较常用的操作 ...
- 查看修复HDFS中丢失的块
检测缺失块 hdfs fsck -list-corruptfileblocks hdfs fsck / | egrep -v '^\.+$' | grep -v eplica 查看上面某一个文件的情况 ...
- heroku快速部署node应用
试了一下heroku,简直碉堡了,下面介绍如何简单几步实现弄得应用的部署访问: 1.首先https://dashboard.heroku.com/进行账号注册 2.github上push一个最新的no ...