echarts 下 legend api 不生效

253 阅读1分钟

首先查看保证option下的legend中的data 与 series中的name 相同(我就是在这看着卡住,恶心)

情况一

var options = {
  legend:{
    data:["2018","2019"]
  }
  series:[
  	{
  	  name:"2018",
          data:[10,20,30,40,50]
  	},
  	{
  	  name:"2019",
  	  data:[30,60,70,60,80]
  	}
  ]
}
myCharts.setOptions(options)

截屏2022-09-20 14.55.32.png

情况二

legend下的data名称是后端动态返回的,这时会出现一些特殊情况

var options = {
  legend:{
    data: legendData // 假装legendData是后端返回动态
  }
  series:[
  	{
  	  name:"2018",
          data:[10,20,30,40,50]
  	},
  	{
  	  name:"2019",
  	  data:[30,60,70,60,80]
  	}
  ]
}
myCharts.setOptions(options)

只是这样直接放上去可能会legend 不显示

解决方法

var options = {
  series:[
  	{
  	  name:"2018",
          data:[10,20,30,40,50]
  	},
  	{
  	  name:"2019",
  	  data:[30,60,70,60,80]
  	}
  ]
}
var legend = {
    data: legendData // 假装legendData是后端返回动态
}
// legend 整体引入一次
options.legend = legend

myCharts.setOptions(options)

以后出现关于 legend 遇到的难点的内容我会更新在这篇文章中的