Echarts 基本使用五大步骤

Echarts 基本使用的五大步骤

  1. 引入 Echarts 文件
  2. 创建一个容器（必须有宽高）
  3. 获取 DOM 元素（容器），初始化 Echarts 实例
  4. 指定图表的配置项和数据
  5. 使用配置项和数据渲染图表（渲染到容器中）
代码：
<!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配置项目

版权声明：本文为qq_51634332原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。