正文

新手必学：ECharts轻松绘制双图表，数据分析不再难

/0 浏览量
0527

在数据分析的世界里，图表是沟通信息的桥梁。对于新手来说，ECharts 是一个强大的工具，它可以帮助你轻松地绘制出美观且功能丰富的图表。今天，我们就来探讨如何使用 ECharts 实现双图表的绘制，让你的数据分析之旅更加顺畅。

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够轻松地在网页中嵌入丰富的图表。ECharts 提供了多种图表类型，如折线图、柱状图、饼图、地图等，非常适合数据可视化。

二、准备数据

在绘制双图表之前，我们需要准备数据。以下是一个简单的数据示例，用于演示如何绘制双图表。

var data = [
    {
        name: '类别A',
        value: [120, 200]
    },
    {
        name: '类别B',
        value: [150, 80]
    },
    {
        name: '类别C',
        value: [80, 100]
    }
];

这个数据数组包含了三个类别，每个类别有两个值，分别对应两个图表。

三、绘制双图表

接下来，我们将使用 ECharts 来绘制这两个图表。为了方便展示，我们将使用两个不同的图表类型：第一个图表使用折线图，第二个图表使用柱状图。

1. 折线图

首先，我们需要设置折线图的配置项。

var option1 = {
    title: {
        text: '折线图'
    },
    tooltip: {},
    legend: {
        data:['类别A', '类别B', '类别C']
    },
    xAxis: {
        data: ["类别A", "类别B", "类别C"]
    },
    yAxis: {},
    series: [{
        name: '类别A',
        type: 'line',
        data: [120, 200]
    }, {
        name: '类别B',
        type: 'line',
        data: [150, 80]
    }, {
        name: '类别C',
        type: 'line',
        data: [80, 100]
    }]
};

2. 柱状图

然后，我们设置柱状图的配置项。

var option2 = {
    title: {
        text: '柱状图'
    },
    tooltip: {},
    legend: {
        data:['类别A', '类别B', '类别C']
    },
    xAxis: {
        data: ["类别A", "类别B", "类别C"]
    },
    yAxis: {},
    series: [{
        name: '类别A',
        type: 'bar',
        data: [120, 200]
    }, {
        name: '类别B',
        type: 'bar',
        data: [150, 80]
    }, {
        name: '类别C',
        type: 'bar',
        data: [80, 100]
    }]
};

四、整合双图表

最后，我们将两个图表整合到一个页面中。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script>
        var myChart1 = echarts.init(document.getElementById('container'));
        var myChart2 = echarts.init(document.getElementById('container'), null, {
            top: '50%'
        });
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    </script>
</body>
</html>

在这个例子中，我们将两个图表放置在同一个页面中，并通过调整 top 属性来控制第二个图表的位置。

五、总结

通过以上步骤，我们成功地使用 ECharts 绘制了双图表。ECharts 提供了丰富的图表类型和配置项，可以帮助你轻松地实现各种数据可视化需求。希望这篇文章能够帮助你入门 ECharts，让你在数据分析的道路上更加得心应手。

-- 展开阅读全文 --