注：特殊字体需要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>)
)