echart动态柱状排序图切换条件后，清除原来数据重新渲柒

ECharts是一个优秀的开源JavaScript图表库，能够方便地创建各种类型的可视化图表。在本文中，我们将介绍如何使用ECharts和Vue.js框架实现动态柱状排序图，并在切换条件后清除原来数据重新渲染。

首先，我们需要准备一些工具和环境。这里我们将使用Vue.js和ECharts框架。在开始之前，请确保您已经安装了Node.js和npm包管理器。接着，我们可以使用Vue CLI来创建一个基于Vue.js的项目：

vue create echart-demo

在Vue项目中集成ECharts非常简单，只需在项目中安装echarts包即可：

npm install echarts

接下来，我们需要创建一个动态柱状排序图。对于该图表，我们通过修改数据来实现柱状图随时间变化而更新，同时根据不同的条件进行排序。此外，我们还将提供一个按钮来清除原来的数据、重新生成随机数据并重新渲染图表。

下面是示例代码，可以将其放在src/components/Chart.vue文件中：

<template> <div class="chart"> <div class="chart-header"> <button @click="resetData">Reset</button> </div> <div class="chart-body"> <div id="chart"></div> </div> </div> </template> <script> import { ref, onMounted } from 'vue' import * as echarts from 'echarts' export default { name: 'Chart', setup() { // 初始化数据 const data = ref([]) for (let i = 0; i < 10; i++) { data.value.push(Math.floor(Math.random() * 100)) } // 定义排序方式 let sortType = 'ascending' // 生成柱状图 const chart = echarts.init(document.getElementById('chart')) const option = { xAxis: { type: 'category', show: false, }, yAxis: { type: 'value', show: false, }, series: [ { type: 'bar', data: data.value, itemStyle: { color: '#1f78b4', }, }, ], } chart.setOption(option) // 定时更新数据 setInterval(() => { for (let i = 0; i < data.value.length; i++) { data.value[i] += Math.floor(Math.random() * 20) - 10 } sortData(data.value) chart.setOption({ series: [ { data: data.value, }, ], }) }, 3000) // 监听排序方式的变化 watchSortType() return { resetData, } // 将数据按照排序方式排序 function sortData(data) { if (sortType === 'ascending') { data.sort((a, b) => a - b) } else { data.sort((a, b) => b - a) } } // 监听排序方式的变化 function watchSortType() { watch( () => sortType, () => { sortData(data.value) chart.setOption({ series: [ { data: data.value, }, ], }) } ) } // 清除原来数据，重新渲染图表 function resetData() { data.value = [] for (let i = 0; i < 10; i++) { data.value.push(Math.floor(Math.random() * 100)) } chart.setOption({ series: [ { data: data.value, }, ], }) } }, } </script> <style scoped> .chart { border: 1px solid #ccc; border-radius: 5px; margin: 20px; padding: 20px; } .chart-header { display: flex; justify-content: flex-end; } .chart-header button { background-color: #1f78b4; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; } .chart-body { height: 300px; } </style>

在这段代码中，我们首先定义了一个名为Chart的Vue组件。在setup函数中，我们使用Vue的响应式(ref)来定义初始数据(data)和排序方式(sortType)。我们使用setInterval函数来模拟随时间变化而更新数据的过程，并通过setOption函数来重新渲染图表。同时，我们还使用watch函数来监听排序方式的变化，并使用watchSortType函数来处理数据排序和图表的重新渲染。

最后，我们定义了一个resetData函数，该函数用于清除原来的数据并重新渲染图表。通过修改data.value并使用setOption函数重新渲染图表，我们可以实现图表的刷新。

在运行以上代码之后，您将会看到一个漂亮的动态柱状排序图。当您点击Reset按钮时，原来的数据将被清除，随机生成新的数据，并重新渲染图表。同时，您也可以通过改变排序方式来观察图表的不同变化。

总之，结合ECharts和Vue.js框架可以方便地创建出各种类型的可视化图表，并实现交互性功能。在本文中，我们展示了如何使用ECharts和Vue.js框架实现动态柱状排序图，并在切换条件后清除原来的数据并重新渲染图表。