Echarts (option.legend) 图例的属性，外部控制图例的select状态，以达到模拟图例的效果

Posted 2021-03-07 mrzhujl

先列举一些常用的属性：

legend： { //图例，这里基本都是默认设置，就不一一列举，echarts 官网很好找
  type: "plain", //‘plain‘：普通图例。缺省就是普通图例。‘scroll‘：可滚动翻页的图例。当图例数量较多时可以使用。
  show: true, //是否显示（隐藏和显示)柱子的那个按钮，默认true，如果不需要可以设置为false。如果没有请忽略。
  selectedMode: true, //图例上的点击事件，不写默认true ，设置false为不能点击
  orient: ‘horizontal‘,// orient 设置布局方式，默认水平布局，可选值：‘horizontal‘（水平） ¦ ‘vertical‘（垂直）
  data: [‘预期‘, ‘实际‘, ‘假设‘], // 需要个 series 中的 name 一致才会显示
  icon: "circle", //图形部份的形状，类型包括 "circle" ¦ "rect" ¦ "roundRect" ¦ "triangle" ¦ "diamond" | "pin" ¦ "arrow" ¦ "none"
  itemWidth: 15, //图例文字旁边图形的宽高
  itemHight: 2,
  itemGap: 40, // 设置间距
  //bottom: "auto", // 默认在顶部，同理 top，right，left, padding都可以设置
  //x: ‘left‘,  // x 设置水平安放位置，默认全图居中，可选值：‘center‘ ¦ ‘left‘ ¦ ‘right‘ ¦ {number}（x坐标，单位px）
  //y: ‘top‘,  // y 设置垂直安放位置，默认全图顶端，可选值：‘top‘ ¦ ‘bottom‘ ¦ ‘center‘ ¦ {number}（y坐标，单位px）
}

 

再告诉你一个有意思的属性：

legend = { //图例，这里基本都是默认设置，就不一一列举，echarts 官网很好找
  show: false, // 不显示组件自带的图例
  selected = { // 每一项的变量 需要和 series 中一一对应
    "案例一": true, // true 代表显示 echarts 显示该条数据，相当于 原装图例没有被点击的状态
    "案例二": true,
    "案例三": false, // false 代表显示 echarts 不显示该条数据，相当于 原装图例被点击后（图例置灰，数据隐藏）的状态
  }
}

外部通过修改 true ， false 就可以达到模拟原装图例的效果，并且还能做点其它事情，

使用案例：1.让图例的文字可以修改（修改图例文字）。2.让图例响应一些其它事件