LiteyukiBot-TriM/liteyuki/resources/templates/test.html

94 lines
3.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #fff; //
background-repeat: no-repeat; //
background-size: 100% auto;
}
#pieHuan {
width: 400px;
height: 400px;
margin-top: 50px;
// 使
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
padding: 10px;
}
</style>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div id="pieHuan"></div>
<script>{
// 设置背景图为img/bg1.jpg
let bgs = ["bg1.jpg"]
// 随机选择背景图片
document.body.style.backgroundImage = `url(./img/${bgs[Math.floor(Math.random() * bgs.length)]})`;
// 环形图
let pieHuan = echarts.init(document.getElementById('pieHuan'));
pieHuanOption = {
// 标题
title: {
text: 'echarts实现环形图'
},
// 图例
tooltip: {
show: true,
trigger: "item",
backgroundColor: "#1677FF",
// {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
formatter: "{a}{b}<br/>{c}条({d}%)"
},
// 不同区域的颜色
color: ['#65a5ff', '#dcebff'],
series: [
{
name: '访问来源',
type: 'pie',
// 数组的第一项是内半径,第二项是外半径;可以设置不同的内外半径显示成圆环图
radius: ['30%', '50%'],
// 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标;设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度
center: ['50%', '50%'],
itemStyle: {
// 显示图例
normal: {
label: {
show: true
},
labelLine: {
show: true
}
},
emphasis: {
label: {
// 标签内容是否高亮
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
}
},
data: [
{value: 335, name: '百度'},
{value: 335, name: '搜狐'}
]
}
]
};
pieHuan.setOption(pieHuanOption);
}
</script>
</body>
</html>