echarts里如何给每个图表设置和图表大小一样的阴影背景框

在 echarts 中，可以使用 echarts-gl 插件来为图表添加阴影背景框。具体步骤如下：

1. 安装 echarts-gl 插件：

npm install echarts-gl --save

2. 在需要使用阴影背景框的页面中引入 echarts-gl 和 echarts：

<!-- 引入 echarts 和 echarts-gl -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

<!-- 创建一个容器用于显示图表 -->
<div id="myChart" style="width: 600px;height:400px;"></div>

3. 在页面中添加 JavaScript 代码，为图表设置阴影背景框：

// 基于准备好的容器创建图表实例
var myChart = echarts.init(document.getElementById('myChart'));

// 设置图表的配置项和数据
var option = {
    // ... 其他配置项
    backgroundColor: '#fff', // 设置背景色为白色
    textStyle: {
        color: '#333' // 设置字体颜色为黑色
    },
    graphic: {
        elements: [{
            type: 'rect', // 设置元素类型为矩形
            left: 'center',
            top: 'middle',
            shape: {
                width: '90%', // 设置矩形的宽度为图表宽度的90%
                height: '90%' // 设置矩形的高度为图表高度的90%
            },
            style: {
                fill: '#f4f4f4', // 设置矩形填充颜色为灰色
                stroke: '#999', // 设置矩形边框颜色为灰色
                lineWidth: 1, // 设置矩形边框宽度为1
                shadowBlur: 10, // 设置矩形阴影大小
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置矩形阴影颜色
                shadowOffsetX: 0, // 设置矩形阴影水平偏移量
                shadowOffsetY: 0 // 设置矩形阴影垂直偏移量
            }
        }]
    },
    // ... 其他配置项
};

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

代码中，我们通过 `graphic` 属性来添加一个矩形元素，并设置其宽度和高度为图表宽度和高度的90%。然后，我们通过 `style` 属性来设置矩形的填充颜色、边框颜色、边框宽度、阴影大小、阴影颜色和阴影偏移量等属性，从而实现阴影背景框的效果。