echarts动态数据页面刷新问题

问题描述:页面数据返回ok,echarts图表不自动更新,依然显示最初的模样

chart.setOption(option, notMerge, lazyUpdate);

官方文档介绍:
在这里插入图片描述
官方文档:setOption

解决方法:echarts.setOption(option,true),让option不进行合并,而是让旧的组件会被完全移除,新的组件会根据option创建。

<template>
    <div style="display:flex;justify-content: space-evenly">
        <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

        <div>
             <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="name"
                width="120">
                <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "邮件营销",
          type: "line",
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
          emphasis: { focus: "series" }
        },
        {
          name: "联盟广告",
          type: "line",
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
          emphasis: { focus: "series" }
        },
        {
          name: "视频广告",
          type: "line",
          stack: "总量",
          data: [150, 232, 201, 154, 190, 330, 410],
          emphasis: { focus: "series" }
        },
        {
          name: "直接访问",
          type: "line",
          stack: "总量",
          data: [320, 332, 301, 334, 390, 330, 320],
          emphasis: { focus: "series" }
        },
        {
          name: "搜索引擎",
          type: "line",
          stack: "总量",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          emphasis: { focus: "series" }
        }
      ],
      multipleSelection: [],
      myChart: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.handleSelectionChange(this.tableData);
      // 初始化默认全选
      this.tableData.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row, true);
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.hua();
    },
    hua() {
      let data = this.multipleSelection;
      console.log(data);

      // 基于准备好的dom,初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      this.myChart.setOption(
        {
          title: {
            text: "折线图堆叠"
          },
          tooltip: {
            trigger: "axis"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          },
          yAxis: {
            type: "value"
          },
          series: this.multipleSelection
        },
        true
      );
    }
  }
};
</script>


实现的效果:通过点击表格动态展示echarts数据。
在这里插入图片描述
注意:toggleRowSelection为默认elementUI表格全选方法

### 回答1: 在Vue.js中使用Echarts实现数据动态刷新功能,需要先安装Echarts和Vue.js的相关依赖。 1. 首先,在Vue项目中安装Echarts和Vue-Echarts依赖。可以使用npm或yarn安装。 ```bash npm install echarts vue-echarts ``` 2. 在Vue的组件中引入Echarts和Vue-Echarts。 ```javascript import echarts from 'echarts' import VueECharts from 'vue-echarts' // 引入需要的Echarts主题 import 'echarts/theme/macarons' export default { components: { VueECharts }, data() { return { chartOptions: {}, data: [] } }, mounted() { this.initChart() // 调用数据刷新方法 this.refreshData() }, methods: { initChart() { // 初始化图表配置 this.chartOptions = { // 设置Echarts主题 theme: 'macarons', // 设置图表类型和数据 series: [{ type: 'bar', data: this.data }] } }, refreshData() { // 模拟异步获取数据 setTimeout(() => { // 更新数据 this.data = [100, 200, 300, 400, 500] // 在数据更新后重新渲染图表 this.$refs.chart.refresh() // 定时调用数据刷新方法 this.refreshData() }, 2000) } } } ``` 3. 在Vue模板中使用Vue-Echarts组件显示图表。 ```html <template> <div> <vue-echarts ref="chart" :options="chartOptions"></vue-echarts> </div> </template> ``` 以上是一个简单的示例,通过不断更新数据并定时刷新图表实现了数据动态刷新功能。在实际开发中,可以根据需求对图表样式、数据等进行自定义配置。 ### 回答2: Vue.js是一种基于JavaScript的前端框架,而Echarts是一种数据可视化工具。在Vue.js中使用Echarts实现数据动态刷新功能,主要分为以下几个步骤。 首先,我们需要安装Echarts。可以通过npm或者yarn来安装Echarts,命令如下: ``` npm install echarts --save ``` 然后,在Vue组件中引入Echarts的库文件,可以在main.js中全局引入,或者在需要使用Echarts的组件中局部引入,命令如下: ``` import echarts from 'echarts' ``` 接下来,创建一个div作为Echarts图表的容器,并设置其样式和大小,例如: ``` <div id="chart" style="width: 600px; height: 400px;"></div> ``` 然后,在Vue组件的生命周期钩子函数中,使用Echarts创建图表,并将数据传入图表。例如,在created钩子函数中: ``` created() { this.initChart() }, methods: { initChart() { // 根据容器的id获取图表的dom对象 const chartDom = document.getElementById('chart') // 创建echarts实例对象 const myChart = echarts.init(chartDom) // 根据实际需求设置图表的配置项和数据 const option = { //... series: [ { //... data: this.data // 设置数据 } ] } // 使用配置项配置图表 myChart.setOption(option) } } ``` 最后,当需要刷新数据时,可以通过更新this.data来动态刷新图表数据,并重新渲染图表。例如,在一个按钮的点击事件中: ``` methods: { refreshData() { // 在此处根据实际需求更新this.data的值 //... // 重新渲染图表 this.initChart() } } ``` 通过以上步骤,就可以在Vue.js中使用Echarts实现数据动态刷新功能了。当数据变化时,只需要更新数据并重新渲染图表即可。 ### 回答3: 在Vue.js中使用ECharts实现数据动态刷新功能的具体步骤如下: 1. 首先,安装ECharts库。可以通过npm安装ECharts,运行命令:npm install echarts --save 2. 引入ECharts库。在Vue组件中,通过import语句引入ECharts库,如:import echarts from 'echarts' 3. 在Vue组件的data选项中定义一个变量,用于存储ECharts实例。例如:chart: null 4. 在Vue组件的mounted钩子函数中,初始化ECharts实例,并将其挂载到页面上的DOM节点上。例如: ``` mounted() { this.chart = echarts.init(this.$refs.chartContainer) } ``` 5. 在Vue组件的methods选项中,编写一个方法用于更新图表数据。例如: ``` updateChart() { // 获取新的数据 const newData = fetchData() // 更新图表数据 this.chart.setOption({ series: [ { data: newData } ] }) } ``` 在这个方法中,首先通过适当的方式获取新的数据,然后通过setOption方法更新图表的数据。 6. 在需要的时机,调用updateChart方法来更新图表数据。 以上就是在Vue.js中使用ECharts实现数据动态刷新功能的基本步骤。在实际应用中,可能还需要根据具体需求对图表进行配置和样式的调整。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值