<!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>JS添加HTML元素
原文地址：https://www.cnblogs.com/zeng-qh/p/10517664.html