正文

学会ECharts：轻松调用JavaScript绘制强大图表的实战指南

/0 浏览量
0510

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一种简单、高效的方式来创建交互式图表。无论是数据可视化还是信息展示，ECharts 都能够提供丰富的图表类型和灵活的配置选项。本文将带你一步步学会如何使用 ECharts，通过实战来绘制各种强大的图表。

了解 ECharts

ECharts 简介

ECharts 是由百度团队开发的一款开源可视化库，它支持多种图表类型，包括折线图、柱状图、饼图、散点图、地图等。ECharts 的特点是易于使用、高度可定制以及良好的性能。

ECharts 的优势

  • 丰富的图表类型：ECharts 提供了多种图表类型，可以满足不同场景下的需求。
  • 灵活的配置选项：ECharts 的配置项非常丰富，可以轻松调整图表的样式、颜色、动画等。
  • 良好的性能：ECharts 在绘制大量数据时表现良好，能够保证图表的流畅性。
  • 开源免费：ECharts 是一款开源免费的库，可以自由使用。

环境准备

在开始使用 ECharts 之前，需要准备以下环境：

  1. HTML 文件：创建一个 HTML 文件，用于展示 ECharts 图表。
  2. ECharts 库：下载 ECharts 库，并将其包含在 HTML 文件中。
  3. JavaScript 代码：编写 JavaScript 代码来初始化图表并配置图表参数。

实战一：基本折线图

1. 创建 HTML 文件

创建一个名为 index.html 的 HTML 文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 基本折线图</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/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: '基本折线图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

2. 运行 HTML 文件

将 HTML 文件保存到本地，并在浏览器中打开它。你会看到一个简单的折线图。

实战二：柱状图与饼图

1. 修改 HTML 文件

修改 index.html 文件，添加柱状图和饼图：

<!-- ... 其他代码 ... -->
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<!-- ... 其他代码 ... -->

<script type="text/javascript">
    // ... 其他代码 ...

    // 柱状图配置
    var option1 = {
        title: {
            text: '基本柱状图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 饼图配置
    var option2 = {
        title: {
            text: '基本饼图'
        },
        tooltip: {},
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: [
                {value: 235, name: '视频广告'},
                {value: 274, name: '联盟广告'},
                {value: 310, name: '邮件营销'},
                {value: 335, name: '直接访问'},
                {value: 400, name: '搜索引擎'}
            ]
        }]
    };

    // 初始化图表
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 设置图表配置项和数据
    myChart1.setOption(option1);
    myChart2.setOption(option2);
</script>

2. 运行 HTML 文件

在浏览器中打开 index.html 文件，你会看到柱状图和饼图同时展示。

总结

通过本文的实战指南，你学会了如何使用 ECharts 来绘制基本折线图、柱状图和饼图。ECharts 提供了丰富的图表类型和灵活的配置选项，可以帮助你轻松地创建各种强大的图表。希望本文能帮助你更好地掌握 ECharts，将其应用到实际项目中。

-- 展开阅读全文 --