echart 饼图

复制代码
{
    
        legend: {
          top: "60",//左右上下位置
          right: "60",
          orient: "vertical",//排列方式 竖着排列
          itemWidth: 15,//小方块宽度
          textStyle: {
            color: "#ffffff",//字体样式
          },
          formatter: function (name) {
            return name + "  " + jsonData[name];
          },
        },
        graphic: [ //其他信息 可以是图片 文字
          {
            type: "text",
            left: "27%",
            top: "40%",
            style: {
              text: sum,
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 18,
              fontWeight: 400,
            },
          },
          {
            type: "text",
            left: "25%",
            top: "50%",
            style: {
              text: "总数",
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 18,
              fontWeight: 400,
            },
          },
        ],
        color: [ //饼图颜色
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#3ba272",
          "#9a60b4",
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["45%", "70%"],
            avoidLabelOverlap: false,
            center: ["30%", "50%"],
            label: {
              show: false,
              position: "center",
            },

            labelLine: {
              show: false,
            },

            data: data,
          },
        ],
      };
复制代码

 

posted @   小七要走  阅读(143)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示