技術標籤：javascriptecharts

實現效果：

自動輪播效果請見：自動輪播函式封裝

option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}",
        },
        series: [
          {
            name: "",
            type: "pie",
            tooltip:
 
 {
              trigger: "item",
              formatter: "{b}: {c}",
            },

            radius: ["30%", "45%"],
            avoidLabelOverlap: false,
            color: ["#EBFF00", "#00FFB4"],
            labelLine: {
              show:
 
 false,
              length: 10,
              length2: 5,
              lineStyle: {
                color: "#FFFFFF", // 改變標示線的顏色
              },
            },
            label: {
              normal: {
                show: false,
                formatter: "{per|{d}%}\n{hr|}\n{a|}\n{b|{b}}"
 
, //這裡最後另一行設定了一個空資料是為了能讓延長線與hr線對接起來
                padding: [-5, 0, 0, 0], //取消hr線跟延長線之間的間隙
                rich: {
                  a: {
                    color: "#FFFFFF",
                    lineHeight: 20, //設定最後一行空資料高度，為了能讓延長線與hr線對接起來
                    align: "center",
                  },
                  hr: {
                    //設定hr是為了讓中間線能夠自適應長度
                    borderColor: "#ffffff", //hr的顏色為auto時候會主動顯示顏色的
                    width: "100%",
                    borderWidth: 0.5,
                    height: 0.5,
                  },
                  d: {
                    fontSize: 15,
                    padding: [-10, 0, 10, 0],
                  },
                  b: {
                    color: "#FFFFFF",
                    fontSize: 15,
                  },

                  per: {
                    //用百分比資料來調整下數字位置，顯的好看些。如果不設定，formatter最後一行的空資料就不需要
                    padding: [11, 0],
                    fontSize: 20,
                  },
                },
              },
            },
            data: [
              {
                value: 25.7,
                name: "居民用水",
                label: { show: true, fontSize: "8", fontWeight: "bold" },
                labelLine: { show: true },
              },
              {
                value: 74.3,
                name: "企業用水",
                label: { show: true, fontSize: "8", fontWeight: "bold" },
                labelLine: { show: true },
              },
            ],
          },
        ],
      };