<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑马echarts</title>
<script src="../js/echarts.min.js"></script>
<style>
.box {
width: 400px;
/* 设置盒子的宽度为 400 像素 */
height: 400px;
/* 设置盒子的高度为 400 像素 */
background-color: pink;
/* 设置盒子的背景颜色为粉红色 */
}
</style> <!-- 在 head 标签中定义了一个内部样式表,在其中定义了一个名为 .box 的 CSS 类,用于设置盒子的样式 -->
</head>
<body>
<div class="box"></div> <!-- 创建一个 div 元素,并给它添加类名为 box,这个 div 元素将会应用之前在样式表中定义的 .box 类的样式 -->
<script>
var myChart = echarts.init(document.querySelector('.box'));
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option); // 将配置项和数据应用到图表中,以显示出柱状图
</script>
</body>
</html>
echarts1.html
最新推荐文章于 2024-04-22 07:59:50 发布
本文展示了如何使用ECharts库在一个400x400px的粉色背景div中创建一个饼图,展示网站访问来源的假想数据,包括搜索引擎、直接访问等。
1万+

被折叠的 条评论
为什么被折叠?



