正文

从入门到精通：轻松搭建echarts4离线演示实例教程

/0 浏览量
0418

引言

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松地将数据转换成图表。ECharts4 是 ECharts 的最新版本，具有更丰富的图表类型和更强大的功能。本教程将带领大家从入门到精通，一步步搭建一个 ECharts4 离线演示实例。

环境准备

在开始之前，请确保您的电脑已安装以下环境：

  1. Node.js：ECharts4 支持使用 Node.js 进行打包，因此需要安装 Node.js。
  2. npm：Node.js 自带 npm，用于安装和管理项目依赖。
  3. 浏览器：任意支持 JavaScript 的浏览器，用于预览和测试图表。

第一步：创建项目目录

首先，在您的电脑上创建一个项目目录，例如 echarts-offline。

mkdir echarts-offline
cd echarts-offline

第二步：初始化项目

使用 npm 初始化项目，创建一个 package.json 文件。

npm init -y

第三步：安装 ECharts4

在项目目录中，使用 npm 安装 ECharts4。

npm install echarts --save

第四步：创建 HTML 文件

在项目目录中创建一个名为 index.html 的 HTML 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts4 离线演示实例</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: 'ECharts4 离线演示实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

第五步：打包 ECharts4

在项目目录中，创建一个名为 build 的文件夹，用于存放打包后的 ECharts4 文件。

mkdir build

在项目根目录下，创建一个名为 build.js 的 JavaScript 文件，用于打包 ECharts4。

const fs = require('fs');
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const config = {
    entry: './build.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'echarts.min.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: [
        new UglifyJSPlugin()
    ]
};

module.exports = config;

在项目根目录下，安装必要的依赖。

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env uglifyjs-webpack-plugin

运行 webpack 打包 ECharts4。

npx webpack --config build.js

第六步：运行项目

在项目目录中，运行以下命令启动本地服务器。

npx http-server .

在浏览器中访问 http://localhost:8080，即可看到 ECharts4 离线演示实例。

总结

通过本教程，您已经成功搭建了一个 ECharts4 离线演示实例。接下来，您可以尝试使用 ECharts4 的各种图表类型和功能，制作出更多精美的图表。祝您学习愉快！

-- 展开阅读全文 --