数据可视化-ECharts Html项目实战
<!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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
function renderChart(option) {
myChart.setOption(option, true);
}
app.init = function () {
option = {
// ECharts 图表配置项
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直达'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
renderChart(option);
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>这段代码创建了一个简单的饼图，使用了ECharts的基础配置项来展示数据。在实际项目中，你可以根据需要调整图表类型、数据和配置项来满足不同的可视化需求。
评论已关闭