google charts
楚浩然
google charts
使用的时候，引入的包比echarts小
//在html中引入方式
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
//在项目中引用
npm install chart.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<title>Document</title>
<style>
body {
padding: 16px;
}
canvas {
border: 1px dotted red;
}
</style>
</head>
<body>
<canvas id="chart" height="50vw" width="50vw"></canvas>
<script>
function getColor(number) {
const colorList = [
"#FFC125",
"#FF6A6A",
"#55A8FD",
"#5FDAC7",
"#FA7D7D",
"#AEB3B8",
"#92C789",
"#6A6A6A",
"#FFD700",
"#FFC1C1",
"#FF6A6A",
"#E066FF",
];
return colorList[number];
}
var mychart = document.getElementById("chart").getContext("2d");
new Chart(mychart, {
type: "doughnut",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
data: [65, 59, 20, 81, 56, 55, 40],
borderWidth: 1,
backgroundColor: [65, 59, 20, 81, 56, 55, 40].map((item, index) =>
getColor(index % 10)
),
},
],
},
options: {
maintainAspectRatio: true,
aspectRatio: 1.5,
plugins: {
legend: {
position: "right",
labels: {
boxWidth: 12,
font: {
boxWidth: 24,
size: 12,
pointStyle: "circle",
usePointStyle: true,
},
},
},
tooltip: {
callbacks: {
label: function (context) {
var label = `${context.label} ${context.formattedValue}%`;
return label;
},
},
bodyFont: {
size: 12,
},
},
},
},
});
</script>
</body>
</html>
类似资料：