ECharts-html 实训
在HTML中使用ECharts创建一个简单的饼图,可以参考以下代码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: [
{value: 235, name: '视频广告'},
{value: 274, name: '联盟广告'},
{value: 310, name: '邮件营销'},
{value: 335, name: '直接访问'},
{value: 400, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
这段代码首先通过<script>
标签引入了ECharts的库。然后,在<body>
中定义了一个div
元素,该元素将用作图表的容器。接下来,使用echarts.init
方法初始化ECharts实例,并设置图表的配置项option
。最后,通过myChart.setOption(option)
应用这些配置,渲染出一个简单的饼图。
评论已关闭