Echarts中legend(图例)的配置方法

MerkleJqueryRu
11,222 阅读1分钟

Echarts是一款功能强大的数据可视化库，它提供了丰富的图表类型和交互功能，帮助开发者将数据转化为可视化的图形展示。其中，图例（Legend）组件在Echarts中起到了重要的作用，用于展现不同系列的标记、颜色和名称，并且可以通过点击图例来控制显示或隐藏相应的系列。

代码示例：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    myChart.setOption({
      title: {
          text: '主标题'
      },
      tooltip: {
        
      },

      legend: {
        show: true, //是否显示
        icon: "circle",//图例样式
        // top: "55%", // 组件离容器的距离
        // bottom:"20%", // 组件离容器的距离
        // left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
        // right: "5%", 
        // left:"10%" // // 组件离容器的距离
        // padding: 5, // 图例内边距
        // itemWidth: 6, // 图例标记的图形宽度。
        // itemGap: 20, // 图例每项之间的间隔。
        // itemHeight: 14, // 图例标记的图形高度。
        // selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
        inactiveColor: "#fffddd", // 图例关闭时的颜色。
        textStyle: {//图例的公用文本样式。
          // color: "#aabbcc", // 文字的颜色。
          // fontStyle: "normal", // 文字字体的风格。'italic'
          // fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
          // fontFamily: "sans-serif", // 文字的字体系列。
          // fontSize: 12, // 文字的字体大小。
          // lineHeight: 20, // 行高。
          // backgroundColor: "transparent", // 文字块背景色。
          // borderColor: "transparent", // 文字块边框颜色。
          // borderWidth: 0, // 文字块边框宽度。
          // borderRadius: 0, // 文字块的圆角。
          // padding: 0, // 文字块的内边距
          // shadowColor: "transparent", // 文字块的背景阴影颜色
          // shadowBlur: 0, // 文字块的背景阴影长度。
          // shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
          // shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
          // // width: 50, // 文字块的宽度。 默认
          // // height: 40, // 文字块的高度 默认
          // textBorderColor: "transparent", // 文字本身的描边颜色。
          // textBorderWidth: 0, // 文字本身的描边宽度。
          // textShadowColor: "transparent", // 文字本身的阴影颜色。
          // textShadowBlur: 0, // 文字本身的阴影长度。
          // textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
          // textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
        }
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>
<style>
#main {
  width: 500px;
  height: 500px;
}
</style>

图例组件的作用： 图例是Echarts中一种重要的可视化组件，它通过标记、颜色和名称的组合，将不同系列的数据进行展示。图例通常位于图表的一侧或底部，提供了一种直观的方式来理解和比较图表中的数据。

图例的配置项： 在上述示例代码中，我们可以看到一些常用的图例配置项，例如：

  1. show：控制图例是否显示。可以将其设置为true或false来决定是否展示图例。
  2. icon：图例标记的样式，可以是预设的图形类型，如"circle"、"rect"等。
  3. inactiveColor：当系列被隐藏时，图例的颜色可以通过该属性进行配置。
  4. textStyle：图例文本的样式配置，可以设置颜色、字体大小、字体粗细等。

图例的交互功能： 除了展示不同系列的标记和名称，图例还具备交互功能，可以通过点击图例来控制显示或隐藏相应的系列。这一功能通过selectedMode配置项来实现，默认情况下是开启的，可以将其设置为false来关闭图例选择。

avatar
文章
阅读
粉丝