因为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 },