当前位置：首页 > article >正文

Echart 环形图特殊字体富文本

article 2024/11/14 17:36:21

注：特殊字体需要UI人员提供一下 .ttf 文件

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        .chart-item {
            width: 50%;
            height: 400px;
            margin: 24px auto;
        }

        /* @font-face {
            font-family: myDigital;
            src: url("../font/myfont.ttf");
        } */
    </style>
</head>

<body>
    <div class="chart-item" id="chart"></div>
    <script>
        var myChartArr = [];
        function drawChart(id, data) {
            var myEchart = echarts.init(document.getElementById(id));
            var option = {
                title: {
                    text: "{text1|"+ data.data[0] +"} {text2|%}",
                    x: "47%",
                    y: "46%",
                    textAlign: "center",
                    textStyle: {
                        rich: {
                            text1: {
                                fontFamily: "myDigital",
                                color: "#4f6492",
                                fontSize: 20,
                                padding: [0, 0, 0, 7]
                            },
                            text2: {
                                color: "#4f6492",
                                fontSize: 16,
                                padding: [6, 3, 0, -3]
                            }
                        }
                    }
                },
                legend: {
                    orient: "vertical",
                    show: false,
                },
                tooltip: {
                    show: false,
                },
                series: [{
                    type: "pie",
                    radius: ["53%", "75%"],
                    center: ["50%", "50%"],
                    hoverAnimation: true,
                    z: 10,
                    label: {
                        show: false
                    },
                    data: [{
                        value: data.data[0],
                        name: "item1",
                        itemStyle: {
                            color: "#3dd782",
                        },
                    }, {
                        value: data.data[1],
                        name: "item2",
                        itemStyle: {
                            color: "#f5f5fd",
                        },
                    },],
                    labelLine: {
                        show: false,
                    },
                }, {
                    type: "pie",
                    radius: ["42%", "57%"],
                    center: ["50%", "50%"],
                    hoverAnimation: false,

                    label: {
                        show: false,
                    },
                    data: [{
                        value: data.data[0],
                        name: "item1",
                        itemStyle: {
                            color: "#39bf78",
                            opacity: 0.9,
                        },
                    }, {
                        value: data.data[1],
                        name: "item2",
                        itemStyle: {
                            color: "#d6d7df",
                            opacity: 0.9,
                        },
                    },],
                    labelLine: {
                        show: false,
                    },
                },
                ],
            };
            myEchart.setOption(option)
            myChartArr.push(myEchart)
        }
        drawChart('chart', { data: [30.33, 69.67] })

        $(window).resize(function () {
            for (var i = 0; i < myChartArr.length; i++) {
                myChartArr[i].resize();
            }
        })
    </script>
</body>

</html>

查看全文

http://www.kler.cn/a/292764.html