使用 Echarts 和 Select 实现同图表切换不同数据

最新推荐文章于 2024-04-28 17:47:52 发布

肥肥鲨_

最新推荐文章于 2024-04-28 17:47:52 发布

阅读量687

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Senbonzakura_py/article/details/131947434

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts + Select Example</title>

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

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
</head>
<body>

<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

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

// 初始化 Echarts 图表
var myChart = echarts.init(document.getElementById('myChart'));

// 监听 Select 组件的变化事件
$('#mySelect').on('change', function() {
var selectedValue = $(this).val();

// 根据选择的值更新图表数据
var option = {
xAxis: {
data: ['A', 'B', 'C']
},
yAxis: {},
series: [{
name: 'Series 1',
type: 'bar',
data: [10, 20, 30]
}]
};

if (selectedValue === 'option2') {
option.series[0].data = [30, 20, 10];
} else if (selectedValue === 'option3') {
option.series[0].data = [15, 25, 35];
}

// 更新图表
myChart.setOption(option);
});

// 初始图表数据
var option = {
xAxis: {
data: ['A', 'B', 'C']
},
yAxis: {},
series: [{
name: 'Series 1',
type: 'bar',
data: [10, 20, 30]
}]
};

// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>