1. 程式人生 > 其它 >Echarts legend圖例屬性設定

Echarts legend圖例屬性設定

 legend: {
          show: true, //是否顯示
          type: "plain", // 圖例的型別 'plain':普通圖例  'scroll':可滾動翻頁的圖例
          zlevel: 1, // 所有圖形的 zlevel 值。
          icon: "circle",//圖例的圖示 circle 圓形 rect 方形 roundRect圓角方形 triangle三角形 diamond菱形 pin氣球 arrow箭頭
          top: "5%", // bottom:"20%" // 元件離容器的距離
          right: "5%", //left:"10%"  // // 元件離容器的距離
          width: "auto", // 圖例元件的寬度
          height: "auto", // 圖例元件的高度
          orient: "horizontal", // 圖例列表的佈局朝向。 'horizontal'  'vertical'
          align: "auto", // 圖例標記和文字的對齊
          padding: 5, // 圖例內邊距
          itemWidth: 6, // 圖例標記的圖形寬度。
          itemGap: 20, // 圖例每項之間的間隔。
          itemHeight: 14, //  圖例標記的圖形高度。
          symbolKeepAspect: true, // 如果圖示(可能來自系列的 symbol 或使用者自定義的 legend.data.icon)是 path:// 的形式,是否在縮放時保持該圖形的長寬比。
          formatter: function (name) {
            return '{a|text}{a|   }{b|' +  name + '}'
          },
          selectedMode: true, // 圖例選擇的模式,
          inactiveColor: "#ccc", // 圖例關閉時的顏色。
          textStyle: {
            color: "#556677", // 文字的顏色。
            fontStyle: "normal", // 文字字型的風格。
            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 偏移。
            rich: {
            a: {
              color: "red",
              lineHeight: 10,
            },
             b: {
              color: "#fff",
              lineHeight: 10,
            },
          }, // 自定富文字樣式
          },
        },