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

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

一、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] }]

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