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