百度Echarts完全教程（一）

最新推荐文章于 2024-08-22 09:55:39 发布

lucahan

最新推荐文章于 2024-08-22 09:55:39 发布

阅读量3.2w

点赞数 2

文章标签： JavaScript Echarts 可视化

本文链接：https://blog.csdn.net/lucahan/article/details/52668396

版权

百度Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我感觉我每次写博客都挖坑，这一次保证，真的不挖坑了。。。

这一次要介绍的是百度的一个可视化神器——百度Echarts。

相比较与highcharts，echarts毕竟是国内的，而且完全开源，文档写的也很全，最近我在用echarts做可视化，非常之好用。

目前echarts有2和3两个版本，我更喜欢2。因为2的demo更多，文档写的也全。3的话，我不是很喜欢。不过echarts2和3差别不大。本次教程以echarts2为主。

Echarts2：http://echarts.baidu.com/echarts2/index.html

Echarts3：http://echarts.baidu.com/

今天，第一篇首先来讲入门。

首先，我们先来看一下可视化的效果：http://sandbox.runjs.cn/show/yqzosjkw

是不是还是可以的。

完成这个也是比较简单的。

一、创建HTML文档，以及设置好DOM

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>

二、引入echarts.js

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

三、配置echarts配置和图标路径

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
    </script>
</body>

在这里要进行说明：（1）require.config是用来设置echarts的配置文件，因为我们用的是在线的echarts.js，所以按照这种方式配置就可以。如果你用的是下载下来的js，那么就要重新配置好路径。（2）关于第二个require，这里是用来设置要表。除了第一个‘echarts’必要引用外，还要引用所需要显示的图。例如，我们这个表用到的是柱状图，所以要引用bar，那么如果我们要引用折线图，那么就要引用line了，依次类推，具体可以看官方文档。