技術標籤：eacharts

目錄

• echarts 之配置屬性
• • 餅形圖

echarts 之配置屬性

• 南丁格爾圖 roseType: “radius”,
  
• 雙層餅形圖
  

餅形圖

• 配置屬性，也就是再 option 裡面書寫修改圖形的樣式
  • color：圖形的顏色設定 陣列
  • title ： 是否顯示元件的標題（一般用於顯示標題，或者計算總數）
  • tooltip：提示框，用於滑鼠滑過的時候，顯示當前想要顯示的內容
  • formatter：一般用於處理文字的顯示，可以玩出各種騷操作
  • legend：顯示圖例的說明 裡面的left方位可以使用的是 位置(center) 和 百分比(5%)
    • textStyle：文字的樣式 fontSize color padding等
  • series：用於顯示每一個數據 => {},{},{}
    • 注意點：就是若是要顯示兩層，就是外層的有連線線，裡層只是顯示 百分比，那麼則需要兩個{}，然後對於內層只是顯示百分比的，需要在label之中 設定一個定位 position: "inner", 表示顯示內層
    • type：型別 bar line pie
    • roseType: “radius”, 是否顯示南丁格爾圖 ‘radius’ 半徑展現資料的大小。‘area’ 半徑展現資料大小。
    • minAngle：最小佔比，就是用於顯示佔比很小，但是又需要顯示的那種
      *radius & center： 半徑 & 中心點
    • data：資料的顯示，為陣列形式
    • itemStyle： 對每一項 進行佔比留白 需要設定normal下的 borderColor & borderWidth
    • labelLine：連線線的設計 length: 6, length2:10, 有外線1和外線2 ；lineStyle 設定線的顏色
    • label：就是對series中的每一個數據進行樣式的修飾
      • labelLine：是否顯示連線線
      • normal：
        • formatter：對文字的修飾 然後對 rich 的樣式的使用 "{meony|" + XXX + "}"
        • rich：就是樣式的設計 比如：rich:{ money:{ 裡面寫樣式 } }

title: [
  {
    //修改總價格  lastTotal 再外層進行計算後 再顯示與標題之中 一般放在正中央
    text: "\n{val|" + lastTotal+ "}",
    top: this.top,
    left: "center",
    textStyle: { // title的文字 樣式修飾
      rich: {
        val: {
          fontSize: 20,
          fontWeight: "bold",
          color: "#1A1A1E",
        },
      },
    },
  },
],
 tooltip: {
   trigger: "item", // 觸發項 就是每一個item 針對散點和餅形圖； axis 針對柱狀圖 
   borderColor: "rgba(255,255,255,.3)",
   backgroundColor: "rgba(13,5,30,.6)",
   borderWidth: 1,
   padding: 5,
   // 處理文字的顯示
   formatter: function (parms) {
     var str =
       parms.marker +
       "" +
       parms.data.name +
       "</br>" +
       "金額：" +
       formatNumber(parms.data.meony) +
       "億元</br>" +
       "佔比：" +
       parseFloat(parms.percent).toFixed(1) +
       "%";
     return str;
   },
 },
 // 顯示圖例的說明  left 這邊可以使用的是 位置 和 百分比 
 legend: {
   left: "center",
   left: "5%",
   bottom: "5%",
   itemWidth: 10,
   itemHeight: 10,
   textStyle: {
     color: "#73747E",
     fontSize: "12",
   },
 },
 series: [
          {
            type: "pie",
            minAngle: 17, //設定扇形的最小佔比
            radius: this.radius,
            center: this.pieChartSimpleCenter,
            data: echartData,
            hoverAnimation: false,
            // 對每一項 進行佔比留白
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            labelLine: {
              normal: {
                length: 6,
                length2: 10,
                // lineStyle: {//連線線
                //   color: "#e6e6e6",
                // },
              },
            },
            label: {
              labelLine: {
                show: true,
              },
              normal: {
                formatter: (params) => {
                  return "{meony|" + formatNumber(params.data.meony) + "}";
                },
                rich: {
                  meony: {
                    fontSize: 12,
                    fontWeight: "bold",
                    color: "#1A1A1E",
                  },
                },
              },
            },
          },
          //顯示內層
          {
            name: "",
            type: "pie",
            minAngle: 17, //設定扇形的最小佔比
            radius: this.radius,
            center: this.pieChartSimpleCenter,
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 3,
              borderColor: "#fff",
            },
            label: {
              color: "#000",
              show: true,
              position: "inner",
              width: 10,
              height: 0,
              lineHeight: 0,
              formatter: function (p) {
                let percent = parseFloat(p.percent).toFixed(1);
                return "\n{white|" + percent + "%}";
              },
              align: "center",
              rich: {
                white: {
                  fontSize: 12,
                  color: "#fff",
                  align: "center",
                  padding: [0, -2, 0, 0],
                },
              },
            },
            labelLine: {
              show: false,
            },
            // 餅形圖資料
            data: echartData,
          },
 ],