【Echarts】pie示例

最新推荐文章于 2024-10-29 16:54:38 发布

Lik1024

最新推荐文章于 2024-10-29 16:54:38 发布

阅读量695

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts

本文链接：https://blog.youkuaiyun.com/github_39365750/article/details/103859822

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文详细分析了近五年成交土地的统计数据，通过饼状图展示了不同类型的成交土地占比情况，直观呈现了土地市场的发展趋势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例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: []
          }
        ]
      }