Echarts实现简单折线图效果

Echarts实现简单折线图效果。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>

<h1>Echarts实现折线图案例</h1>
<hr>

<div id="container" style="min-width:960px;height:400px">

</div>
<!--引入Echarts 的CDN资源，非工程思想。npm安装-->
<!--推荐去字节跳动CDN资源去引入前端资源-->
<!--引入echarts库-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js"></script>

<script>

    window.onload = function () {
        //initChinaEchartMap();
    }

    let chartDom = document.getElementById('container');
    let myChart = echarts.init(chartDom);

    //指定图表的配置项和数据
    let option={
        //标题
        title:{
            text:'视频播放Top50分析统计'
        },
        //工具箱
        //保存图片
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                }
            }
        },
        //图例-每一条数据的名字叫销量
        legend:{
            data:['播放量']
        },
        //x轴
        xAxis:{
            data:["Music","Movie","News","Tiktok","Sport","DIY"]
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis:{},
        //数据-data是最终要显示的数据
        series:[{
            name:'播放量',
            type:'line',
            data:[40,20,35,60,55,10]
        }]
    };
    //使用刚刚指定的配置项和数据项显示图表
    myChart.setOption(option);

</script>
</body>
</html>
运行效果：