【Echarts】pie示例

例1:
show:
在這裏插入圖片描述
code:

	let opt = {
        title: {
          text: `近五年成交土地:${data.land.total}宗`,
          left: 16,
          top: 10,
          textStyle: {
            color: "#333",
            fontSize: 14
          }
        },
        legend: {
          bottom: 10,
          orient: "horizontal",
          data: []
        },
        color: ["#B692FC", "#FE7D78", "#51D1FF"],
        series: [
          {
            name: "",
            type: "pie", //餅狀圖
            radius: ["20%", "50%"],
            hoverAnimation: false,
            data: landPieData, //數據,我們ajax獲取
            label: {
              show: true,
              padding: [0, -40, 20],
              fontSize: 12,
              fontWeight: 600,
              color: "#000000",
              formatter: function(p) {
                //指示線對應文字
                return `${p.value}宗`;
              }
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 50
            }
          },
          {
            name: "土地統計",
            type: "pie",
            radius: ["20%", "50%"],
            hoverAnimation: false,
            label: {
              show: true,
              position: "inner",
              formatter: function(p) {
                return `${p.percent}%`;
              }
            },
            data: []
          }
        ]
      }

例2:
show:
在這裏插入圖片描述
code:

	let opt = {
        title: {
          text: `近五年成交土地:${data.land.total}宗`,
          left: 16,
          top: 10,
          textStyle: {
            color: "#333",
            fontSize: 14
          }
        },
        legend: {
          bottom: 10,
          orient: "horizontal",
          data: []
        },
        color: ["#B692FC", "#FE7D78", "#51D1FF"],
        series: [
          {
            name: "",
            type: "pie", //餅狀圖
            radius: ["20%", "50%"],
            hoverAnimation: false,
            label: {
              show: true,
              padding: [20, -40, 20],
              fontSize: 12,
              fontWeight: 600,
              color: "#000000",
              formatter: function(p) {
                //指示線對應文字
                return `${p.value}宗\n\n${p.percent}%`;
              }
            },
            labelLine: {
              show: true,
              length: 5,
              length2: 50
            },
            data: []
          }
        ]
      }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章