因为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. 数据结构65:快速排序算法(QSort,快排)

    上节介绍了如何使用起泡排序的思想对无序表中的记录按照一定的规则进行排序,本节再介绍一种排序算法——快速排序算法(Quick Sort). C语言中自带函数库中就有快速排序——qsort函数 ,包含在 ...

  2. 906 AlvinZH的奇幻猜想----整数乘积(背包DP大作战O)

    906 AlvinZH的奇幻猜想----整数乘积 思路 难题.动态规划. 将数字串按字符串输入,处理起来更方便些. dp[i][j]:表示str[0~i]中插入j个乘号时的乘积最大值.状态转移方程为: ...

  3. Linx 的组管理和权限管理

    Linux组基本介绍 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件 有所有者.所在组.其它组的概念. 1) 所有者 2) 所在组 3) 其它组 4) 改变用户所在的组 ...

  4. Windows下安装Redis服务(zip)

    1.官方没有 Windows版本的 Redis,官网介绍: Redis项目不正式支持Windows.但是,微软开发并维护了针对Win64的Windows版本. 2.Windows版本下载地址:http ...

  5. PIE_SDK.NET功能表

  6. maxscript批量设置摄像机并保存渲染图

    代码可直接运行 fn renderr = ( a=box() --新建一个立方体 ambientcolor = (color ) --设置环境光(搞不太懂,白的不出错就行) to do ( dis = ...

  7. 《大数据日知录》读书笔记-ch11大规模批处理系统

    MapReduce: 计算模型: 实例1:单词统计 实例2:链接反转 实例3:页面点击统计 系统架构: 在Map阶段还可以执行可选的Combiner操作,类似于Reduce,但是在Mapper sid ...

  8. Robot Framework(Screenshot 库)

    Screenshot 库 Scrennshot 同样为 Robot Framework 标准类库,我们只将它提供的其它中一个关键字“TakeScreenshot”,它用于截取到当前窗口.虽然 Scre ...

  9. 使用spring遇到问题 事物不提交和更新失败

    1 使用学习使用spring mvc进行前端代码编写,发现提交修改没发sql语句 测试dao层又没问题 解决: 原来是spring配置文件,事物管理 绑定到了dao层.测试界面前端应该绑定到servi ...

  10. mysql启动登陆

    mysql.server start    # 1. 启动 mysql.server stop     # 2. 停止 mysql.server restart  # 3. 重启 1.本地登陆 sud ...