echarts图例组件限制文字宽度及点击图例高亮对应数据图形

限制文字宽度

由于图例多并且每一个部分文字比较长，而图表又限制在右侧比较小的一个位置，导致无法看到翻页按钮，所以就决定限制一下文字宽度。

legend: {
	type: 'scroll',
	pageIconColor: '#409eff',
	tooltip: {
	  show: true,
	  trigger: "item",
	  triggerOn: "mousemove",
	},
	// 主要是这里实现的，给每个文字设置了textstyle限制其宽度
	// 使其超过这个宽度换行
	formatter: ["{a|{name}}"].join("\n"),
	textStyle: {
	  rich: {
	    a: {
	      width: 72
	    }
	  }
	},
	show: true,
  	orient: "vertical",
   	x: "55%",
   	y: "middle",
  	data: []
},

点击图例高亮对应数据图形

需求上需要选中某个图例时高亮显示，由于在我的需求中是单选，不太需要某个数据图形切换选中状态，直接所以可以直接把切换图例选中状态这个事件当做点击图例的事件来用。

let em = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption(this.option);
// 绑定legendselectchanged事件，该事件为切换图例的选中状态时触发
myChart.on('legendselectchanged', function(params) {
  let legend = params.name;
  let id="";
  // 取消选中图例
  myChart.dispatchAction({type: 'legendSelect',name: legend});
  // 从数据中遍历出选中的name对应的id
  em.option.series[0].data.forEach(item => {
    if(item.name == legend){
      id=item.id;
    }
  });
  if(em.name==''){
    // 第一次点击或者说未选中时的点击
    // 高亮显示点中的图例对应的数据图形
    myChart.dispatchAction({type: 'highlight',seriesIndex: 0,name: legend});
    em.current = id;
    em.name = legend;
    // 可以在这里执行对应高亮之后的事件了
  }else if(em.name == legend){
    // 点击已经高亮的取消高亮
    // 取消点中的图例对应的数据图形的高亮显示
    myChart.dispatchAction({type: 'downplay',seriesIndex: 0,name: legend});
    em.name = '';
    em.current = '';
    // 可以在这里执行对应取消高亮之后的事件了
  }else if(em.name != legend){
    // 点击其他未高亮实现高亮
    // 取消当前数据图形的高亮显示
    myChart.dispatchAction({type: 'downplay',seriesIndex: 0,name: em.name});
    // 高亮显示点中的图例对应的数据图形
    myChart.dispatchAction({type: 'highlight',seriesIndex: 0,name: legend});
    em.current = id;
    em.name = legend;
    // 可以在这里执行对应高亮之后的事件了
  }
});

这里是点击图例的实现，点击数据图形高亮同理，只不过绑定的事件换为click事件。