echarts在html中怎么插

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地在网页中创建可交互的图表，那么如何在 HTML 中插入 ECharts 呢？下面我将一步一步地为大家讲解。

我们需要确保已经在项目中引入了 ECharts，有两种引入方式：script 标签引入和 npm/yarn 安装。

script标签引入：在 HTML 文件中，通过 script 标签引入 ECharts 的 JavaScript 文件,如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        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>

npm/yarn 安装：在项目根目录下执行以下命令：

npm install echarts --save

或者

yarn add echarts

安装完成后，在项目中引入 ECharts：

import * as echarts from 'echarts';

以下是详细步骤：

第一步：创建一个 HTML 文件，并在其中添加一个 div 元素,用来放置图表。

<div id="main" style="width: 600px;height:400px;"></div>

注意：这里的 div 需要设置宽高,否则图表可能无法正常显示。

第二步：在 HTML 文件中引入 ECharts 的 JavaScript 文件，如果使用 script 标签引入,可以参考上面的代码。

第三步：在 JavaScript 代码中，首先通过 echarts.init 方法初始化一个 echarts 实例，然后设置图表的配置项和数据，使用 setOption 方法将配置项和数据应用到实例上,以下是示例代码：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    // 标题
    title: {
        text: 'ECharts 示例'
    },
    // 提示框
    tooltip: {},
    // 图例
    legend: {
        data:['销量']
    },
    // x轴
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    // y轴
    yAxis: {},
    // 系列列表
    series: [{
        name: '销量',
        type: 'bar', // 类型为柱状图
        data: [5, 20, 36, 10, 10, 20] // 数据
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

到这里，一个简单的 ECharts 图表就已经在 HTML 中插入成功了，ECharts 提供了丰富的图表类型和配置项，你可以根据自己的需求进行定制，更多关于 ECharts 的使用和配置，可以参考官方文档，希望这篇文章能帮助你快速地在 HTML 中插入 ECharts 图表。

echarts在html中怎么插