vue项目中使用echarts图表,图表需根据不同搜索条件重新渲染,问题是图表并没有完全重新渲染

在Vue项目中,使用ECharts图表根据搜索条件重新渲染时遇到问题,即新数据渲染后仍保留旧数据。尽管尝试在重新渲染前清空数据,但效果不理想。问题出在`drawLine`方法中,即使清空了`xData`、`seriesData`、`lengData`,依然存在旧数据。解决方案是在更新数据前调用`myChart.clear()`来清除图表内容。
摘要由CSDN通过智能技术生成

vue项目中使用echarts图表,图表需根据不同搜索条件重新渲染。

问题:图表并没有完全重新渲染,或者说渲染后图表中还会看到上一次的数据。假如上一次渲染出十条数据,这次渲染出六条数据,但是显示的还是十条,前六条是本次渲染内容,后四条是上次渲染的后四条数据。

这样看来,肯定是重新渲染前需要清空数据的问题,但是数据置空的代码写了还是没能达到理想的效果。

下面是画图方法:

drawLine(){

let myChart = echarts.init(document.getElementById('myChart'));

myChart.setOption({

tooltip : {

trigger: 'axis',

axisPointer : { // 坐标轴指示器,坐标轴触发有效

type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'

},

confine: true,

formatter: function (params, ticket, callback) {//自定义tooltip显示内容

var showHtm="";

for(var i=0;i<params.length;i++) {

var color = params[i].marker;

var name = params[i].seriesName.length>20?params[i].seriesName.substring(0,19)+'...':par

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 使用 ECharts 渲染多个图表,并且根据浏览器窗口的变化自动重新渲染图表的步骤如下: 1. 在 `mounted` 钩子函数,获取 DOM 元素,并初始化 ECharts 实例。 ```javascript mounted() { // 获取 DOM 元素 const chart1 = this.$refs.chart1 const chart2 = this.$refs.chart2 // 初始化 ECharts 实例 this.chart1 = echarts.init(chart1) this.chart2 = echarts.init(chart2) } ``` 2. 在 `created` 钩子函数,监听浏览器窗口大小变化,触发重新渲染图表的方法。 ```javascript created() { // 监听浏览器窗口大小变化,触发重新渲染图表的方法 window.addEventListener('resize', this.handleResize) }, methods: { // 重新渲染图表的方法 handleResize() { this.chart1.resize() this.chart2.resize() }, }, ``` 3. 在模板使用 `ref` 属性获取 DOM 元素,并绑定 `v-on:resize` 事件监听浏览器窗口大小变化。 ```html <template> <div> <div ref="chart1" class="chart"></div> <div ref="chart2" class="chart"></div> </div> </template> <style> .chart { width: 50%; height: 300px; } </style> ``` 完整的代码示例: ```html <template> <div> <div ref="chart1" class="chart"></div> <div ref="chart2" class="chart"></div> </div> </template> <style> .chart { width: 50%; height: 300px; } </style> <script> export default { mounted() { // 获取 DOM 元素 const chart1 = this.$refs.chart1 const chart2 = this.$refs.chart2 // 初始化 ECharts 实例 this.chart1 = echarts.init(chart1) this.chart2 = echarts.init(chart2) }, created() { // 监听浏览器窗口大小变化,触发重新渲染图表的方法 window.addEventListener('resize', this.handleResize) }, methods: { // 重新渲染图表的方法 handleResize() { this.chart1.resize() this.chart2.resize() }, }, } </script> ``` 要注意的是,由于 ECharts 图表默认不会随着容器大小的变化而自适应,因此要手动调用 `resize()` 方法重新渲染图表
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值