帮我写一个最简单的JS下拉列表绑定echarts图表的代码
时间: 2024-04-29 16:21:43 浏览: 92
好的,以下是一个最简单的JS下拉列表绑定echarts图表的代码:
```html
<!-- 引入echarts库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 创建一个下拉列表 -->
<select id="select">
<option value="bar">柱状图</option>
<option value="line">折线图</option>
<option value="pie">饼图</option>
</select>
<!-- 创建一个用于显示echarts图表的div -->
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 获取下拉列表和用于显示图表的div元素
var select = document.getElementById("select");
var chart = document.getElementById("chart");
// 绑定下拉列表的change事件
select.addEventListener("change", function() {
// 获取选中的图表类型
var chartType = select.value;
// 创建echarts实例
var myChart = echarts.init(chart);
// 根据选中的图表类型创建对应的echarts配置项
var option = {};
if (chartType === "bar") {
option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar"
}]
};
} else if (chartType === "line") {
option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: "line"
}]
};
} else if (chartType === "pie") {
option = {
series: [{
name: "访问来源",
type: "pie",
radius: "55%",
data: [{
value: 335,
name: "直接访问"
}, {
value: 310,
name: "邮件营销"
}, {
value: 234,
name: "联盟广告"
}, {
value: 135,
name: "视频广告"
}, {
value: 1548,
name: "搜索引擎"
}]
}]
};
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>
```
这段代码会创建一个下拉列表,包含三个选项:柱状图、折线图和饼图。当用户选择一个选项时,会根据选项来显示对应的echarts图表。具体实现过程请参考注释。
阅读全文