echarts-legend

legend

legend要显示，series数据一定要有name

 let options = {
    legend: {
      show: true,
    },
    xAxis: {
      data: time,
    },
    yAxis: {},
    series: [
      {
        id: 1, // legend要显示，series数据一定要有name
        name: "data",
        type: "line",
        data: value,
      },
    ],
  };

图形的调节

图形形状和图形之间的间距

itemHeight,itemHeight 图形的宽和高
itemGap：图例之间的间隔

  let options = {
    legend: {
      show: true,
      itemWidth: 50, //   图形宽
      itemHeight: 50, // 图形高
      itemGap: 200, //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
    },
    xAxis: {
      data: time,
    },
    yAxis: {},
    series: [
      {
        id: 0, 
        name: "time",
        type: "line",
        data: value,
      },
      {
        id: 1, 
        name: "data",
        type: "line",
        data: value,
      },
    ],
  };

线条的调节 lineStyle

 legend: {
      show: true,
      itemWidth: 80,
      itemHeight: 50,
      backgroundColor: "blue",
      lineStyle: {
        color: "#fff",
        type: [1, 10], //"dotted" ,支持数组的写法  [1, 10]，具体用法跟svg描边用法相同
      },
    },

图形形状

通过icon 可以设置图形的形状

    legend: {
      show: true,
      itemWidtg: 50,
      itemHeight: 50,
      itemGap: 200,
      icon: "rect",
    },

除了内置的’circle’, ‘rect’, 'roundRect’外，还可以使用图片。
可以通过 ‘image://url’ 设置为图片

    legend: {
      show: true,
      itemWidtg: 50,
      itemHeight: 50,
      itemGap: 200,
      icon: "image://http://localhost:5173//favicon.ico",
      lineStyle: {
        type: "dashed",
        width: 1,
      },
    },

边框的调节

itemStyle:边框，线条的颜色

   legend: {
     show: true,
     itemWidtg: 50,
     itemHeight: 50,
     itemGap: 200,
     icon: "rect",
     itemStyle: {
       // 边框，线条的颜色
       borderColor: "red",
       borderType: "solid",
       borderWidth: 1,
     },
     lineStyle: {
       type: "dashed",
       width: 1,
     },
   },

文字样式的调节

文字样式的调节主要集中在 textStyle中

  legend: {
     show: true,
     itemWidth: 80,
     itemHeight: 50,
     backgroundColor: "blue",
     lineStyle: {
       color: "#fff",
       type: [1, 10], //"dotted"
     },
     textStyle: {
       color: "red",
       backgroundColor: "yellow",
    /*  padding: 3,
       borderRadius: 3,
       borderWidth: 1,
       borderColor: "red",*/
       lineHeight: 20,
       height: 20,
     },
   },

formatter 自定义文本内容

formatter 用来格式化图例文本，支持字符串模板和回调函数两种形式。
字符串模板：

   legend: {
     formatter: "legend {name}",
  }

回调函数：

  legend: {
     formatter: (name) => {
          return name + "-test";
       },
  }

例子：

  const data = {
    d1: [10, 21, 3, 15, 22, 11],
    d2: [14, 15, 16, 25, 12, 22],
  };
  let options = {
    legend: {
      show: true,
      itemWidth: 80,
      itemHeight: 50,
      backgroundColor: "blue",
      formatter: (name) => {
        const total = data[name].reduce((pre, now) => {
          return pre + now;
        });
        return total;
      },
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6],
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };

legend.data

legend.data:图例的数据数组,如果 data 没有被指定，会自动从当前系列中获取。数组项通常为一个字符串，每一项代表一个系列的 name。也可以是一个对象，对象的属性有：

例子：最大的值的图例的文字颜色设为黄色

onMounted(() => {
  let canvas = document.getElementById("canvas");

  myEcharts = echarts.init(canvas, "vintage", {
    width: 500,
    height: 500,
    devicePixelRatio: window.devicePixelRatio,
    locale: "ZH",
  });

  const data = {
    d1: [10, 21, 3, 15, 22, 11],
    d2: [14, 15, 16, 25, 12, 22],
  };
  let options = {
    legend: {
      show: true,
      itemWidth: 80,
      itemHeight: 50,
      backgroundColor: "blue",
      formatter: (name) => {
        const total = data[name].reduce((pre, now) => {
          return pre + now;
        });
        return total;
      },
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6],
    },
    yAxis: {},
    series: [
      {
        id: 0,
        name: "d1",
        type: "line",
        data: data.d1,
      },
      {
        id: 1,
        name: "d2",
        type: "line",
        data: data.d2,
      },
    ],
  };
  rednderEcharts(options);
  watch(() => {
    let nameArr = Object.keys(data);
    nameArr.sort((pre, now) => {
      let preAllValue = data[pre].reduce((preValue, nowValue) => {
        return preValue + nowValue;
      });
      let nowAllValue = data[now].reduce((preValue, nowValue) => {
        return preValue + nowValue;
      });
      return nowAllValue - preAllValue;
    });
    let newData = nameArr.map((name, index) => {
      if (index == 0) {
        return {
          name,
          textStyle: {
            color: "yellow",
          },
        };
      } else {
        return {
          name,
        };
      }
    });
    myEcharts.setOption({
      legend: {
        data: newData,
      },
    });
  }, data);
});

/*
 watch(() => {},data)
当该data发生变化时，触发watch中的函数操作。
*/

图例整体位置和样式的调节

注意 ：width 的最大值并不是随便设置的，最大值是item的宽+间距(还有padding等)，超出这个值后，在设置就无效。
height也是，正常情况下就是图例的高+padding,变大变小后看不出来,但实际上是有变化的。他有个可视的区域：图例的高+padding，超出这个范围后，可视的区域还是这样。没有超出，再将tyep:scroll后会有分页，可视区域的高不变，但是图例所占的区域是height，超出height的部分隐藏。
当宽度不够时会自动换行

    legend: {
      show: true,
      itemWidtg: 50,
      itemHeight: 50,
      itemGap: 200,
      icon: "rect",
      backgroundColor: "blue",
      //组件大小
      width: 1200, //宽度最大就是item+间距 支持%
      padding: 10, //内边距，可以是数组[1,2,3,4]
      //调整位置
      top: 0,
      left: 50,
      /*调整位置,支持%
      top: "10%",
      left: 50,*/
      //边框样式
       borderWidth: 2,
       borderColor: "red",
       borderRadius: 5,
       // 阴影
       shadowColor: "rgba(0, 0, 0, 0.5)",
       shadowBlur: 10,
    },

图例的交互

图例可以交互，默认点击后图例颜色会变会，数据不在显示。

selected：图例选中状态表
inactiveColor:图例关闭时的颜色
selectedMode:选择的模式，默认开启图例选择，可以设成 false 关闭。也可以设成 ‘single’ 或者 ‘multiple’。

   legend: {
     show: true,
     itemWidth: 80,
     itemHeight: 50,
     backgroundColor: "blue",
     formatter: (name) => {
       const total = data[name].reduce((pre, now) => {
         return pre + now;
       });
       return total;
     },
     selected: {
       d1: true,
       d2: true,
     },
     inactiveColor: "#fff",
     selectedMode: "single",
   },

selector: 图例组件中的选择器按钮，目前包括“全选”和“反选”两种功能

legend: {
      show: true,
      itemWidth: 80,
      itemHeight: 50,
      backgroundColor: "blue",
      formatter: (name) => {
        const total = data[name].reduce((pre, now) => {
          return pre + now;
        });
        return total;
      },

      selector: true,
    },

图例的排列方式

orient: “colum”, 如果间距过大，超出 整个echarts范围， orient不会生效或只会部分生效。

  	 legend: {
  	    orient: "vertical",
  	 }

type:图例的类型。‘plain’：普通图例，‘scroll’：可滚动翻页的图例。
分页的样式可以通过pageXxx来修改。

//这里要限制height
    legend: {
      height: "10%",
      width: "30%",
      type: "scroll",
      backgroundColor: "blue",
      orient: "vertical",
    },

align: 图例标记和文本的对齐

    legend: {
     height: "10%",

     backgroundColor: "blue",

     align: "left",
   },