| vue+echarts结合使用，动态更新数据及数据变化重新渲染问题 | 您所在的位置：网站首页 › 图表的源数据发生变化后 › vue+echarts结合使用，动态更新数据及数据变化重新渲染问题 |
vue+echarts结合使用，动态更新数据及数据变化重新渲染问题
|
话不多说：先看实现效果图：点击下拉框，更改原数据，折线图实时渲染。
1. 安装echarts npm install echarts --save这里说明一下问题，如果不加版本号，默认安装最新版。问题是最新版在下面的引入会报错 ，所以我安装了@4.9.0版的echarts，使用起来没问题。 npm install [email protected] --save2. 我使用的vue cli3，需要在main.js文件中全局引入echarts // 全局引入echarts组件用于绘制图表 import echarts from 'echarts' Vue.prototype.$echarts = echarts3. 在.vue文件里直接使用即可。 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) } } }4. 使用官方的样式，网址：https://echarts.apache.org/zh/theme-builder.html 下载选择的样式.js文件即可使用，网站支持自定义样式，并导出代码，比女朋友都贴心-.-有木有。
先上代码：当然是使用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] }]也可以使用计算属性实时更新数据，这里就不展示了。
|
【本文地址】
公司简介
联系我们