在 ECharts 中，setOption 是一个用于更新图表配置项的方法。通过调用 setOption 方法，你可以动态地修改图表的配置，实现数据更新、样式变更等操作，而无需重新初始化整个图表。

以下是一个简单的示例，演示如何使用 setOption 更新图表数据：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts setOption</title>
    <!-- 引入 ECharts 主文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>

<!-- 创建一个包含图表的 DOM 元素 -->
<div id="myChart" style="width: 800px; height: 400px;"></div>

<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));

// 模拟的初始数据
var initialData = [10, 20, 30, 40, 50];

// ECharts 初始配置项
var option = {
    xAxis: {
        type: 'category',
        data: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: initialData
        }
    ]
};

// 使用初始配置项设置 ECharts 图表
myChart.setOption(option);

// 模拟新的数据
var newData = [30, 40, 50, 60, 70];

// 使用 setOption 更新图表数据
myChart.setOption({
    series: [
        {
            data: newData
        }
    ]
});
</script>

</body>
</html>

在这个例子中，首先使用 setOption 方法初始化图表并传入初始配置项。然后，通过再次调用 setOption 方法，可以更新图表的数据。这里我们模拟了初始数据和新的数据，用于演示如何动态更新图表。

需要注意的是，setOption 方法可以接受一个包含完整或部分配置项的对象，根据传入的配置项，图表会进行相应的更新。在实际应用中，你可以根据需要更新图表的数据、样式、坐标轴等配置项。


转载请注明出处：http://www.zyzy.cn/article/detail/5104/ECharts