ECharts绘制柱状图

准备工作：ECharts是百度推出ECharts用于数据可视化的工具。在ECharts官网下载源代码版本。

1.引入echarts.js库文件

<script src="./echarts.js"></script>

2.绘制div容器并设置样式

<body>
<div id="main" style="width: 600px; height: 400px;background-color: aquamarine;"></div>
</body>

3.初始化容器

<script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
</script>

4.绘制简单柱状图

<!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>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px;background-color: aquamarine;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        var option = {
            title: {
                text: '标题',
                subtext: '副标题'
            },
            tooltip:{},
            legend:{data:['图例']},
            xAxis: { data: ['11', '22', '33', '44', '55'] },
            yAxis: {},
            series: [{
                name: '嘻嘻',
                type: 'bar',
                data: [23, 55, 42, 54, 25]
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

5.结果;

 

# echarts # vscode
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

2025-2026 大数据技术专业毕设选题推荐： 精准适配选题清单

avatar 永洪数据分析社区
cover

java计算机毕业设计教师工作量统计系统 基于SpringBoot的高校教师绩效测算与可视化平台 教师教学任务与工作量智能汇总系统

avatar 永洪数据分析社区

BackstopJS 与 Prettier 集成：配置文件格式化与团队规范统一

在当今的前端开发环境中，**BackstopJS** 作为一款强大的视觉回归测试工具，已经成为保障UI一致性的重要武器。然而，随着团队规模的扩大和项目的复杂度提升，如何确保所有开发人员遵循统一的配置规范成为了一个挑战。本文将为您详细介绍如何通过 Prettier 工具实现 BackstopJS 配置文件的自动格式化，从而提升团队协作效率和代码质量。💪## 为什么需要 BackstopJS 配

avatar 永洪数据分析社区