正文

新手必看！ECharts图表轻松入门：首次绘制无需加载数据库

/0 浏览量
0712

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地在网页中绘制各种图表。对于新手来说，ECharts 提供了简单易用的接口和丰富的图表类型，使得绘制图表变得不再复杂。本文将带你从零开始，学习如何使用 ECharts 绘制图表，而且无需加载数据库。

环境准备

首先，你需要确保你的开发环境中安装了 Node.js 和 npm（Node.js 的包管理器）。这些工具可以帮助你快速搭建项目并安装 ECharts 库。

# 安装 Node.js
# （具体步骤请参考 Node.js 官网）

# 安装 npm
# （具体步骤请参考 npm 官网）

# 安装 ECharts
npm install echarts --save

创建基本图表

接下来，我们将创建一个最简单的 ECharts 图表——柱状图。首先，你需要一个 HTML 文件来展示图表。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        // 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这个例子中，我们创建了一个包含一个 div 元素的 HTML 文件，它的 ID 是 container。这个 div 元素将作为图表的容器。然后，我们通过 CDN 引入了 ECharts 库，并使用 JavaScript 创建了一个图表实例。

在 JavaScript 部分，我们定义了图表的配置项 option，包括标题、提示框、图例、坐标轴和系列数据。最后，我们使用 setOption 方法将配置项应用到图表实例上。

无需加载数据库

在上面的例子中，我们没有加载数据库，而是直接在代码中定义了数据。在实际应用中，你可能会从数据库或其他数据源加载数据。但即使如此，ECharts 仍然非常简单易用。

例如，假设你从数据库中获取了以下数据：

var data = [
    {name: "衬衫", value: 5},
    {name: "羊毛衫", value: 20},
    {name: "雪纺衫", value: 36},
    {name: "裤子", value: 10},
    {name: "高跟鞋", value: 10},
    {name: "袜子", value: 20}
];

你可以将这个数据数组替换掉 option 中的 data 属性，ECharts 会自动处理数据并绘制图表。

总结

通过本文的学习，你现在已经可以轻松地使用 ECharts 绘制图表了。ECharts 的强大之处在于其丰富的图表类型和简单的使用方式。希望本文能帮助你快速入门 ECharts，并在未来的项目中发挥其作用。

-- 展开阅读全文 --