首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue echarts动态更新数据及数据变化重新渲染

vue+echarts动态更新数据及数据变化重新渲染方式

2024-06-12 14:45:47 作者：不爱写代码的小黄

这篇文章主要介绍了vue+echarts动态更新数据及数据变化重新渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

话不多说：先看实现效果图：点击下拉框，更改原数据，折线图实时渲染。

一、echarts基本使用

1. 安装echarts

npm install echarts --save

这里说明一下问题，如果不加版本号，默认安装最新版。

问题是最新版在下面的引入会报错，所以我安装了@4.9.0版的echarts，使用起来没问题。

npm install echarts@4.9.0 --save

2. 我使用的vue cli3

需要在main.js文件中全局引入echarts

// 全局引入echarts组件用于绘制图表
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3. 在.vue文件里直接使用即可

<template>
  <div>
    <div id="chartLineBox" style="width: 100%;height: 360px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'FreshmenManageAdmitted',
  data () {
    return {
      // 指定图表的配置项和数据
      option: {
        tooltip: { // 设置tip提示
            trigger: 'axis'
        },
        legend: { // 设置区分（哪条线属于什么）
        },
        xAxis: { // 设置x轴
            type: 'category',
            boundaryGap: false, // 坐标轴两边不留白
            data: ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7'],
            name: '日期', // X轴 name
            nameTextStyle: { // 坐标轴名称的文字样式
                fontSize: 16,
                padding: [0, 0, 0, 20]
            }
        },
        yAxis: {
            name: '正确率',
            nameTextStyle: {
                fontSize: 16,
                padding: [0, 0, 10, 0]
            },
            type: 'value'
        },
        series: [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90], type: 'line' },
                 { name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50], type: 'line' }]
      }
    }
  },
  mounted () {
    this.chartChange()
  },
  methods: {
    chartChange () {
      const myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
      // 使用刚指定的配置项和数据显示图表。
      myEcharts.setOption(this.option, true)
    }
  }
}
</script>

4. 使用官方的样式

网址：https://echarts.apache.org/zh/theme-builder.html

下载选择的样式.js文件即可使用，网站支持自定义样式，并导出代码，比女朋友都贴心-.-有木有。

js代码：

// 三种样式表，可以选择一种使用
import 'assets/css/macarons.js'
import 'assets/css/customed.js'
import 'assets/css/vintage.js'
 
 
this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
this.myEcharts.setOption(this.option, true)

二、数据动态绑定及表格实时渲染问题

先上代码：当然是使用watch啦，watch大法好啊，为了数据变化时实时刷新表格，在监听到属性值发生改变时，重新渲染一次表格。

敲重点：echarts不会自动帮你渲染数据的，需要手动再次调用setOption函数。

再次敲重点，重点，重点：看到 this.myEcharts.setOption(this.option, true)这一行代码了吗？最后这个属性'true'真是nb坏了，没它不行。

上官方代码：setOption的函数定义，option是指图表的配置项和数据，notMerge是指是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新option 创建所有新组件。

也就是说如果不设置noeMerge就会自动合并数据，离谱！千万要设置，千万要设置，千万要设置。

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

export default {
  name: 'StudentCourseDataChart',
  props: {
    xData: {
      type: Array,
      default () {
        return []
      }
    },
    yData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    'xData': function (val) {
      this.chartChange()
    },
    'yData': function (val) {
      this.chartChange()
    }
  },
  methods: {
    chartChange () {
      this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
      this.option.xAxis.data = this.xData
      for (var i = 0; i < this.yData.length; i++) {
        this.yData[i]['type'] = 'line'
      }
      this.option.series = this.yData
      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.setOption(this.option, true)
    }
  }

数据部分如下：

上面的循环添加'type'属性只是为了简化原数据内容，若不加这个属性会报错。

const StudentCourseChartDataX = ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7']
const StudentCourseChartDataY = [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90] },
                                 { name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50] }]

也可以使用计算属性实时更新数据，这里就不展示了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。