echarts 画一个自定义饼图

var chartDom = document.getElementById("chart_1");
var myChart = echarts.init(chartDom);
var option;

option = {
    tooltip: {
        trigger: "item",
    },
    legend: {
        show: false,
        top: "5%",
        left: "center",
    },
    graphic: {
        type: "image",
        id: "myImage",
        left: "center",
        top: "center",
        z: -10, // z 值小于系列图形,确保图片在饼图下方显示
        style: {
            image: "img/setting.png", // 图片的 URL
            width: 100,
            height: 100,
        },
    },
    series: [
        {
            name: "Access From",
            type: "pie",
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            padAngle: 2, //中间间隔
            itemStyle: {
                borderRadius: 0,
            },
            label: {
                show: false,
                position: "center",
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [
                {
                    value: 1048,
                    name: "Search Engine",
                    itemStyle: { color: "#FF5757" },
                },
                { value: 735, name: "Direct", itemStyle: { color: "#FFBA56" } },
                { value: 580, name: "Email", itemStyle: { color: "#8AF5BB" } },
            ],
        },
        {
            name: "外边框",
            type: "pie",
            clockWise: false,
            radius: ["80%", "82%"],
            labelLine: {
                show: false,
            },
            data: [
                {
                    value: 10,
                    itemStyle: {
                        normal: {
                            borderWidth: 8, //设置边框粗细
                            borderColor: "rgb(9,37,71, 0.5)", //边框颜色
                        },
                    },
                },
            ],
        },
        {
            name: "内边框",
            type: "pie",
            clockWise: false,
            radius: ["48%", "50%"],
            labelLine: {
                show: false,
            },
            data: [
                {
                    value: 10,
                    itemStyle: {
                        normal: {
                            borderWidth: 1, //设置边框粗细
                            borderColor: "rgb(9,37,71, 0.5)", //边框颜色
                        },
                    },
                },
            ],
        },
    ],
};

option && myChart.setOption(option);

image

posted @   暖暖De幸福  阅读(34)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示