在代码中体会DOM

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 EChar2222t22s 实例title>
    
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
head>
<body>
    
    <div id="main" style="width: 600px;height:400px;">div>
    <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',
				color: 'green',
                data: [45, 20, 36, 10, 120, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    script>
body>
html>

dom的使用

在代码中体会DOM_第1张图片

绘图结果

在给出的HTML代码中,DOM是指"Document Object Model",它是网页的编程接口,允许开发者使用JavaScript等脚本语言来访问、操作和修改网页的内容和结构。

在这段HTML代码中,DOM的相关部分是:

<body>
    
    <div id="main" style="width: 600px;height:400px;">div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            // ...(省略其他配置)
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    script>
body>

在这段代码中,document.getElementById('main') 是通过DOM方法获取页面中具有’id’为’main’的DOM元素,即

这个
元素。然后,将该DOM元素传递给ECharts库的echarts.init()方法,从而将图表初始化在这个DOM元素上,实现图表的渲染和显示。

所以,在这里,这个

就是DOM,它在页面中用于容纳 ECharts 图表。

你可能感兴趣的:(javascript,前端,html)