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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM