那么 如何使用vue和echarts 将这些筛选出来的人动态展示呢
时间: 2023-11-28 13:48:37 浏览: 22
可以使用 Vue.js 和 ECharts 来实现动态展示筛选出来的人的功能。具体实现步骤如下:
1. 首先,将筛选出来的人的数据存储到 Vue.js 的 data 中。
2. 在 HTML 页面中使用 ECharts 组件来展示数据。可以使用 ECharts 的柱状图、折线图等不同类型的图表来展示数据。
3. 在 Vue.js 的 mounted 钩子函数中初始化 ECharts 实例,并将数据传入到 ECharts 中。
4. 可以使用 Vue.js 的 watch 监听数据的变化,当数据发生变化时,重新渲染 ECharts 实例,实现动态展示效果。
下面是一个简单的示例代码:
```html
<template>
<div id="chart" style="width: 100%; height: 500px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
data () {
return {
filteredData: [] // 筛选出来的人的数据
}
},
mounted () {
// 初始化 ECharts 实例
this.chart = echarts.init(document.getElementById('chart'))
// 将数据传入到 ECharts 中
this.chart.setOption(this.getOption())
},
watch: {
filteredData () {
// 数据发生变化时重新渲染 ECharts 实例
this.chart.setOption(this.getOption())
}
},
methods: {
getOption () {
// 构造 ECharts 的配置项
return {
title: {
text: '筛选出来的人的数据'
},
tooltip: {},
xAxis: {
data: this.filteredData.map(item => item.name)
},
yAxis: {},
series: [{
name: '数据',
type: 'bar',
data: this.filteredData.map(item => item.value)
}]
}
}
}
}
</script>
```
以上代码展示了使用 ECharts 来展示筛选出来的人的数据的基本思路。具体实现时,还需要根据实际情况进行调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)