Echarts 基本使用五大步骤

最新推荐文章于 2024-05-28 11:11:34 发布

imtanqin

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量5.7k

点赞数 1

分类专栏： Echarts 文章标签：可视化 echarts 数据可视化前端大前端

本文链接：https://blog.csdn.net/qq_51634332/article/details/117985263

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Echarts 基本使用的五大步骤

引入 Echarts 文件
创建一个容器（必须有宽高）
获取 DOM 元素（容器），初始化 Echarts 实例
指定图表的配置项和数据
使用配置项和数据渲染图表（渲染到容器中）

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box {
                width: 600px;
                height: 400px;
                border: 1px solid #000;
                margin: 100px auto;
            }
        </style>
        <!-- 1. 引入 Echarts 文件 -->
        <script src="./js/echarts.min.js"></script>
    </head>
    <body>
        <!-- 2. 创建一个容器（必须有宽高） -->
        <div class="box"></div>
        <script>
            /* 3. 获取 DOM 元素（容器），初始化 Echarts 实例 */
            const myEchart = echarts.init(document.querySelector('.box'))

            /* 4. 指定图表的配置项和数据 */
            const option = {
                title: {
                    text: 'ECharts 入门示例',
                    left: 'center',
                    top: 'bottom',
                    show: false,
                },
                tooltip: {},
                legend: {
                    data: ['你好'],
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                },
                yAxis: {},
                series: [
                    {
                        name: '你好',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20],
                    },
                ],
            }

             /* 5. 使用配置项和数据渲染图表（渲染到容器中） */
            myEchart.setOption(option)
        </script>
    </body>
</html>

效果图：

none

1.0 了解数据可视化
2.0 Echarts基本使用五大步骤
3.0 Echarts配置项目

imtanqin

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Echarts 基本使用五大步骤

Echarts 基本使用的五大步骤引入 Echarts 文件创建一个容器（必须有宽高）获取 DOM 元素（容器），初始化 Echarts 实例指定图表的配置项和数据使用配置项和数据渲染图表（渲染到容器中）
复制链接

扫一扫