EChart 学习笔记一：EChart在html中的使用方式。

最新推荐文章于 2024-05-16 22:32:26 发布

前端菜鸟来报道

最新推荐文章于 2024-05-16 22:32:26 发布

阅读量4.2k

点赞数 6

分类专栏： EChart 文章标签： html 前端

本文链接：https://blog.csdn.net/WQearl/article/details/106624619

版权

EChart 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

做项目的时候有用到，现在做一些笔记来记录，以免长时间没使用便给忘记。本人前端新手，如果其中内容有误，还请多指教，感激不尽！

EChart 在HTML中有两种使用方式，一种是使用<script>标签引入,一种是使用CDN（内容分发网络）方法，还有一种是npm安装方法

一使用<script>标签引入

使用<script>标签引入前需要下载echarts.min.js 文件，并包含在项目中。如果没有echarts.min.js文件，可以通过以下链接，可以去定制EChart.min.js文件。https://echarts.apache.org/zh/download.html

点击在线定制，跳转到定制界面。

在这里可以选择需要使用到的图表，并拉到网页最小面，有一个下载，点击下载。

下载的时候会跳转到一个生成界面，当界面显示OK，并提示保存文件时，就证明生成成功。保存生成的文件即可。保存的文件就是需要的echarts.min.js文件。

使用例子如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js 文件-->

    <!-- 方式一：通过<script>引入 -->
    <script src="../EChart/echarts.js"></script>
</head>

<body>
    <div id="chart" style="width: 500px;height:500px;"></div>
    <script type="text/javascript">
        var Chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: 'My Chart Example'
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["语文", "数学", "英语", "生物", "地理", "化学"]
            },
            yAxis: {},
            series: [{
                name: '科目',
                type: 'bar',
                data: [90, 80, 100, 70, 88, 93]
            }]
        };

        Chart.setOption(option);
    </script>
</body>

</html>

二使用CDN方法

使用CDN方法。不用定制echart文件，只需要在<script>标签内引入链接即可。

一共有两种CDN方法：

1. <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2.<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>

具体例子如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js 文件-->

    <!-- 方式二 -->
    <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 或者 方式三  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>
    <div id="chart" style="width: 500px;height:500px;"></div>
    <script type="text/javascript">
        var Chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: 'My Chart Example'
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["语文", "数学", "英语", "生物", "地理", "化学"]
            },
            yAxis: {},
            series: [{
                name: '科目',
                type: 'bar',
                data: [90, 80, 100, 70, 88, 93]
            }]
        };

        Chart.setOption(option);
    </script>
</body>

</html>

三 NPM方法

第三种是通过NPM方式实现。

需要注意的是，用NPM安装EChart，NPM的版本必须大于3.0。

1.查看npm版本：npm

2.升级或安装cnpm：npm install cnpm -g

3.升级npm：cnpm install npm -g

4.通过cnpm获取echarts：cnpm install echarts --save

安装完成后 ECharts 和 zrender 会放在 node_modules 目录下。

然后，我们可以直接在项目代码中使用 require('echarts') 来使用。

例子如下：

    <script type="text/javascript">
        var charts = require('echarts');
         var Chart = charts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: 'My Chart Example'
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["语文", "数学", "英语", "生物", "地理", "化学"]
            },
            yAxis: {},
            series: [{
                name: '科目',
                type: 'bar',
                data: [90, 80, 100, 70, 88, 93]
            }]
        };

        Chart.setOption(option);
    </script>

这里使用NPM方法有一点问题，无法进行显示，暂时未解决，待解决了再更新。

以下是源代码，供参考。

此番学习参考菜鸟教程：https://www.runoob.com/echarts/echarts-install.html

前端菜鸟来报道

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
EChart 学习笔记一：EChart在html中的使用方式。

做项目的时候有用到，现在做一些笔记来记录，以免长时间没使用便给忘记。本人前端新手，如果其中内容有误，还请多指教，感激不尽！EChart 在HTML中有两种使用方式，一种是使用<script>标签引入,一种是使用CDN（内容分发网络）方法，还有一种是npm安装方法一使用<script>标签引入使用<script>标签引入前需要下载echarts.min.js 文件，并包含在项目中。如果没有echarts.min.js文件，可以通过以下链接，可以去定...
复制链接

扫一扫