Echarts中Option?【Color-Title-Tooltip組件】屬性設(shè)置

IT那活兒發(fā)布于2023-01-11 13:19 / 2401人閱讀

點(diǎn)擊上方“IT那活兒”公眾號，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了！！！

Echarts中Option常用屬性設(shè)置

test() {
      var myChart = echarts.init(document.getElementById("main"));
      let option = {

1. 全局調(diào)色盤

color: ["#c23531"],

2. 系列自己的調(diào)色盤

series: [
            {
              type: "bar",
              // 此系列自己的調(diào)色盤
              color: ["#dd6b66"],
              // ...
            },
            {
              type: "pie",
              // 此系列自己的調(diào)色盤
              color: ["#37A2DA"],
              // ...
            },
          ],

3. Title：標(biāo)題組件

title: {
          x: "left", // left | right | center | 100px
          y: "4%", // top | bottom | center | 100px
          // 標(biāo)題
          show: true, //是否顯示
          text: "標(biāo)題內(nèi)容",
          textStyle: {
            color: "#fff", // 主標(biāo)題文字的顏色
            fontStyle: "normal", // 主標(biāo)題文字字體的風(fēng)格
            fontWeight: "normal", // 主標(biāo)題文字字體的粗細(xì)
            fontFamily: "sans-serif", // 主標(biāo)題文字的字體系列
            fontSize: 18, // 字體大小
            lineHeight: "30", // 行高
            textBorderColor: "transparent", // 文字本身的描邊顏色
            textBorderWidth: 0, // 文字本身的描邊寬度
            textShadowColor: "transparent", // 文字本身的陰影顏色
            textShadowBlur: 0, // 文字本身的陰影長度
            textShadowOffsetX: 0, // 文字本身的陰影 X 偏移
            textShadowOffsetY: 0, // 文字本身的陰影 Y 偏移
          },
          subtext: "副標(biāo)題內(nèi)容", // 副標(biāo)題文本
          subtextStyle: {
            color: "red",
            fontSize: "16",
          }, //副標(biāo)題樣式
          textAlign: "auto", //水平對齊
          textVerticalAlign: "auto", // 垂直對齊
          triggerEvent: false, // 是否觸發(fā)事件
          padding: 5, // 標(biāo)題內(nèi)邊距
          itemGap: 10, //主副標(biāo)題之間的間距
          left: 10, // 距離 left top right bottom
          x: "center", // 水平安放位置，默認(rèn)為左對齊
          y: "4%", // 垂直安放位置，默認(rèn)為全圖頂端
          backgroundColor: "pink", // 標(biāo)題背景色
          borderColor: "#ccc", // 標(biāo)題的邊框顏色
          borderWidth: 5, // 標(biāo)題的邊框線寬
          borderRadius: 2, // 圓角半徑
          shadowBlur: 10, //圖形陰影的模糊大小
          shadowColor: "rgba(0, 0, 0, 0.5)", // 陰影顏色
          shadowOffsetX: 5, // 陰影水平方向上的偏移距離
          shadowOffsetY: 5, //陰影垂直方向上的偏移距離
        },

4. Tooltip：提示框組件

tooltip: {
          trigger: "axis", //觸發(fā)類型
          triggerOn: "click", //提示框觸發(fā)的條件
          showContent: true, //是否顯示提示框浮層
          alwaysShowContent: true, //是否永遠(yuǎn)顯示提示框內(nèi)容
          showDelay: 0, //浮層顯示的延遲，單位為 ms
          hideDelay: 100, //浮層隱藏的延遲，單位為 ms
          enterable: false, //鼠標(biāo)是否可進(jìn)入提示框浮層中
          confine: false, //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
          transitionDuration: 0.4, //提示框浮層的移動(dòng)動(dòng)畫過渡時(shí)間，單位是 s
          position: ["50%", "50%"], //提示框浮層的位置，默認(rèn)不設(shè)置時(shí)位置會跟隨鼠標(biāo)的位置
          formatter: "{b0}: {c0}
{b1}: {c1}", //提示框浮層內(nèi)容格式器
          backgroundColor: "transparent", //標(biāo)題背景色
          borderColor: "#ccc", //邊框顏色
          borderWidth: 0, //邊框線寬
          padding: 5, //圖例內(nèi)邊距
          textStyle: mytextStyle, //文本樣式
          axisPointer: { // 鼠標(biāo)放在
            type: "cross", //默認(rèn)為line，line直線，cross十字準(zhǔn)星，shadow陰影
            crossStyle: {
              color: "#fff",
            },},},

      };
      myChart.setOption(option);
    },