echarts 根据后台传的x y 数值 绘制矩形

ECharts 是一款基于 JavaScript 的数据可视化库，它可以通过后台传递的 x 和 y 数值来绘制矩形。

首先，在后台需要准备好相应的数据，包括 x 和 y 的数值。可以使用任何后端语言（如Python、Java等）来处理和传递数据。

接下来，在前端的 HTML 页面中引入 ECharts 库的相应文件。可以通过下载 ECharts 的压缩包并将文件复制到项目中，或者通过 CDN 引入。例如：

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

在 HTML 页面中，创建一个具有一定宽度和高度的容器用于展示图表。例如：

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

接着，在 JavaScript 中使用 ECharts 的 API 来绘制矩形。首先，创建一个 ECharts 的实例对象，并将容器的 DOM 节点传递给它。然后，通过设置相应的配置项来定义图表的类型、坐标轴以及数据。最后，将配置项应用到实例对象上，并渲染图表。具体代码如下：

// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));

// 设置配置项
var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']  // x 数值
    },
    yAxis: {
        type: 'value',
        data: [10, 20, 30, 40, 50]  // y 数值
    },
    series: [{
        type: 'bar',
        data: [25, 15, 35, 20, 45]  // 矩形的数值
    }]
};

// 将配置项应用并渲染图表
myChart.setOption(option);

以上代码使用了柱状图作为示例，设置了 x 轴和 y 轴的数值，以及矩形的具体数值。可以根据实际需要来设置其他的配置项，如图表的样式、标题等。

最后，将 HTML 页面运行起来，就可以通过后台传递的 x 和 y 数值来绘制相应的矩形。页面会展示一个具有相应数据的柱状图。