当前位置：首页 > news >正文

007 前端( JavaScript HTML DOM+Echarts）

news 2025/8/10 5:31:48

一.html dom运用

查找html元素的三种方式

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

1.通过 id 找到 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>msf的网页</title>
</head>
<body><p id="msf">你干什么呢？</p>
<p id="hello">你好世界!</p><script>y=document.getElementById("msf")document.write(y.innerHTML)
</script><script>x=document.getElementById("hello");document.write(x.innerHTML + "</p>"); //p段落
</script></body>
</html>

2.通过标签名找html元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>msf的网页</title>
</head>
<body><div id="main"><p> msf</p><p>mzy</p></div><script>var x=document.getElementById("main");var y=x.getElementsByTagName("p");document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);</script>
</body>
</html>

3.通过类名找html元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>msf的网页</title>
</head>
<body>
<p class="hello">你好世界!</p><script>x=document.getElementsByClassName("hello");document.write("<p>文本来自 class 为 hello段落: " + x[0].innerHTML + "</p>");</script>
</body>
</html>

二、echars

另存为后，用vscode打开，粘贴人家给的模板代码

当js放到body里面，直接粘贴就行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入资源 --><script src="echarts.min.js"></script>
</head>
<body><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><!-- 这个js是放到了body里面 --><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>
</body>
</html>

当js想放在上面，不放在body里面了，需要绑定window.onload事件，表示这个文件执行之后再触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入资源 --><script src="echarts.min.js"></script><script type="text/javascript">window.onload=function(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}</script></head>
<body><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div></body>
</html>
</body>
</html>

知识点：width可以设置百分数，是针对于父级元素来说的，但是height是不能设置百分数的，因为高度可变，但可以设置vh，代表占整个视口的百分比

eg：width:40%

eg：height:35vh

想要什么效果可以自己查

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入资源 --><script src="echarts.min.js"></script><script type="text/javascript">window.onload=function(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
option = {// 标题组件title: {// 标题文本内容text: 'msf',// 还可以设置别的，具体查一下//逗号隔开backgroundColor:'yellow',borderColor:'pink',borderWidth:4,// 文字样式textStyle:{// 文字颜色color:'blue',// 文字大小fontSize:30,},// 距离左边的距离left:20,top:10,},// 提示框组件tooltip: {trigger: 'axis'},// 图例组件legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},// 网格区域grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},// 工具箱组件toolbox: {feature: {saveAsImage: {}}},// x轴xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},// y轴yAxis: {type: 'value'},// 系列列表series: [{name: 'Email',// line折线图，bar柱状图type: 'line',// 表示累加stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}],// 调色板color:['pink','black','red','green','blue'],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}</script><!-- 想调这个表格的样式 --><style>#main{width:40%;height:35vh;background: rgb(239, 199, 199);}</style></head>
<body><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div></body>
</html>
</body>
</html>

查看全文

http://www.dtcms.com/a/318539.html