因为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按需引入后没有显示图例问题的更多相关文章

  1. vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined

    vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...

  2. matplotlib画图无法显示图例 报错No handles with labels found to put in legend.

    很久没有matplotlib了,今天画图的时候发现了一个很小的问题....明明加了legend(),图表会出来,却无法正常显示图例.最后发现只要在plt.plot()加label图例就可以正常显示了.

  3. matplotlib中的legend()—显示图例

    源自  matplotlib中的legend()——用于显示图例 -- 博客园 http://www.cnblogs.com/yinheyi/p/6792120.html legend()的一个用法: ...

  4. echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  5. echarts之字符云tooltip显示混乱问题的解决办法

    echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...

  6. Echarts 南海诸岛简图显示位置调整

        最近需要echart同时显示海南岛和南海诸岛,开始想寻找南海诸岛的数据,经过查找,这种简图数据是没有的(china.js地图数据一一找过了),下图是echarts的一些示例,没有满足我们的要求 ...

  7. Echarts饼图更改颜色、显示数据且换行

    var option = {   title : {       text: '数据来源',       x:'center'   },   tooltip : {       trigger: 'i ...

  8. matplotlib中的legend()——用于显示图例

    legend()的一个用法: 当我们有多个 axes时,我们如何把它们的图例放在一起呢?? 我们可以这么做: import matplotlib.pyplot as plt import numpy ...

  9. Echarts 的悬浮框tooltip显示自定义格式化

    最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...

随机推荐

  1. P2300 合并神犇

    题目链接 题意分析 首先这道题不可以使用简单的贪心来做 根据\(DP\) 我们令\(dp[i]\)表示当前到了\(i\)一共做了\(dp[i]\)次合并 \(pre[i]\)表示当前合并到了\(i\) ...

  2. 单据列表里无法找到ERP系统开发需求单,但是业务对象里可以找到

    当从测试库迁移正式库时,如果新增了子系统,那么两边的子系统ID是不一样的 在BOS里修改单据的子系统只能修改业务对象列表里的子系统ID,单据列表里没有跟着一起修改 所以单据列表里的子系统ID需要手工去 ...

  3. linux入门 配置网络

    我因为有自己的ssr,因此想让虚拟机共享我的ssr,并且不想搞的太麻烦,特此记录一下 1. 获取本机的ip 在命令行里输入ipconfig /all 获取本机IP,如下图所示,我本机ip为10.3.7 ...

  4. HDU5558(后缀自动机~在本串中找前一最长子相同串)

    http://acm.hdu.edu.cn/showproblem.php?pid=5558 题意: 当前的位置是 i , 就找到 s1 = ( 以i为起点到 len 的连续串 ) , s2=( 在 ...

  5. C#嵌入字体

    1:将字体文件(*.ttf)添加到资源文件里,注意资源的名称 2:在Program.cs文件里声明 using System; using System.Collections.Generic; us ...

  6. spring的总结

    1. 第一天 问题:怎样的程序是一个优秀的程序 可维护性好,可扩展性好,性能优秀 问题:业界对象提供什么的概念 高内聚,低耦合,也就是尽量使代码对应的功能写在对应的模块,并且尽量减少类与类之间的关系, ...

  7. request.upload.addEventListener in not a function。

    本人在使用vue开发一套后台系统时,碰到了一个上传文件的需求,因为平时做的上传是使用ajax的方式来进行上传. 现在是使用axios来进行上传,方式没有什么改变: npm i  axios  直接上 ...

  8. c# 引用类型对象的深拷贝

    c#中的对象大体分为值类型和引用类型,值类型大致包括 int, struct等,引用类型大致包括 自定义Class,object 等.string属于特殊的引用类型,不在本文的讨论之内. 值类型直接存 ...

  9. Ionic3,组件的使用(四)

    说明 因为同样是作为 Ionic3 小白,所以很多东西都是自己摸索出来的,可能有很多不合理的地方,请多多指正. 效果图 细节说明 一:组件.页面均采用 懒加载: 二:页面的头部标题栏,采用了组件化的方 ...

  10. overload_protect_config.txt

    overload_protection_switch=Y reject_uri_list= reject_request_percent=50 period_time=10 period_max_fa ...