正文

学会echarts双图并列展示，告别换行烦恼

/0 浏览量
0718

在数据可视化领域，ECharts 是一款非常受欢迎的 JavaScript 库，它可以帮助开发者轻松地创建丰富的图表。当需要在同一个页面中展示多个图表时，如何让它们并排显示而不出现换行的情况，就显得尤为重要。本文将详细介绍如何使用 ECharts 实现双图并列展示，让你告别换行烦恼。

准备工作

在开始之前，请确保你的项目中已经引入了 ECharts 库。你可以通过以下方式引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

HTML 结构

首先，我们需要在 HTML 中为两个图表分别创建一个容器：

<div id="chart1" style="width: 500px;height:300px;"></div>
<div id="chart2" style="width: 500px;height:300px;"></div>

初始化 ECharts 实例

接下来，我们为每个容器分别初始化一个 ECharts 实例：

var myChart1 = echarts.init(document.getElementById('chart1'));
var myChart2 = echarts.init(document.getElementById('chart2'));

配置图表

现在，我们可以为每个图表配置相应的选项。以下是一个简单的柱状图示例：

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: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'category',
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart1.setOption(option1);
myChart2.setOption(option2);

设置图表位置

为了实现双图并列展示，我们需要设置图表的容器宽度。可以通过 CSS 或 JavaScript 实现。以下是一个 CSS 示例：

#chart1, #chart2 {
    float: left; /* 左浮动 */
    margin-right: 10px; /* 间隔 */
}

这样，两个图表就会并排显示了。如果出现换行的情况，可能是因为容器宽度不足以容纳两个图表，你可以适当调整容器的宽度或间隔。

总结

通过以上步骤，你可以轻松地使用 ECharts 实现双图并列展示，从而告别换行烦恼。在实际应用中，你可以根据需求调整图表类型、配置选项和布局方式，以创建出更加美观和实用的数据可视化效果。

-- 展开阅读全文 --