<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计</title>
<!-- 引入 echarts.js --> //要先加载echarts.js 之后再执行方法 不然会报错
<style>
#main{
position: absolute;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;/*
border: 1px solid #00F;*/
}
</style>
</head>
<body>
<script type="text/javascript"> //需要在body内
var url="https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts-en.min.js";
var btn=document.createElement("script");//createElement() 方法通过指定名称创建一个元素
btn.src=url;
document.body.appendChild(btn);//需要appendChild();appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
function myFunction(){
var myChart = echarts.init(document.getElementById(‘main‘));
// 基于准备好的dom，初始化echarts实例
/*
var myChart = echarts.init(document.getElementById(‘main‘));
// 指定图表的配置项和数据
var option = {
title: {
text: ‘请假统计‘
},
tooltip: {},
legend: {
data:[‘天数‘]
},
xAxis: {
data: ["小王","小红","小黑","小赵","小周","小白"]
},
yAxis: {},
series: [{
name: ‘天数‘,
type: ‘bar‘,
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);*/
// 绘制图表。
/*
myChart.setOption(
{ title:
{ text: ‘请假统计‘ },
tooltip: {},
legend: { data:[‘天数‘] },
xAxis: {
data: ["小王","小红","小黑","小赵","小周","小白"] },
yAxis: {},
series: [{
name: ‘天数‘,
type: ‘bar‘,
data: [5, 20, 36, 10, 10, 20] }]
});
*/
myChart.setOption({
series : [
{
name: ‘请假统计‘,
type: ‘pie‘,
radius: ‘55%‘,
data:[
{value:235, name:‘小周‘},
{value:274, name:‘小王‘},
{value:310, name:‘小白‘},
{value:335, name:‘小红‘},
{value:400, name:‘小黑‘}
],yAxis: {},
}
]
})
}
</script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<button onclick="myFunction()">点我</button>
</body>
</html>
原文地址：https://www.cnblogs.com/zeng-qh/p/10517664.html
时间： 2024-08-02 22:04:47