echarts简单入门

最新推荐文章于 2025-04-18 17:22:49 发布

前端xqf

最新推荐文章于 2025-04-18 17:22:49 发布

阅读量325

点赞数

分类专栏：前端 echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/weixin_42635130/article/details/111808636

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

echarts

4 篇文章

订阅专栏

本文是ECharts入门教程，介绍了ECharts入门的步骤，包括引入ECharts CDN、初始化容器、图表渲染，还给出了总体代码和效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts入门

1.引入echartsCDN

<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.js"></script>

2.初始化容器

<div id= 'echarts' style="width: 800px;height: 800px;"></div>

3.图表渲染

<script>
        const echartsDom  = document.getElementById('echarts');//获取dom元素
        const chart = echarts.init(echartsDom);//初始化
        chart.setOption({
        //图表标题
            title:{
                text:'入门'
            },
            //x轴参数
            xAxis:{
                data:['视频','音频','档案']
            },
            
            series:{
                type:'bar',//图表类型（bar柱状图）
                data:[100,200,300]//数据
            }
        })
    </script>

总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.js"></script>
    <div id= 'echarts' style="width: 800px;height: 800px;"></div>
    <script>
        const echartsDom  = document.getElementById('echarts');
        const chart = echarts.init(echartsDom);
        chart.setOption({
            title:{
                text:'入门'
            },
            xAxis:{
                data:['视频','音频','档案']
            },
            yAxis:{},
            series:{
                type:'bar',
                data:[100,200,300]
            }
        })
    </script>
</body>
</html>

效果图
在这里插入图片描述