在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新
主要是以下几步:
- echarts的option设置在data(){}中
- 在mounted(){}生命周期去初始化数据,初始化echarts
- 在updated(){}生命周期中去setOption(option)渲染echarts。
模板vue文件如下:
<template> <div id="myChart" ref="myChart"></div> </template> <script> import echarts from ‘echarts‘ export default { data(){ return { chart:null, option:{ //echarts配置项 } } }, methods:{ initData(){//去请求初始化数据 }, initEcharts(){//初始化dom let dom = this.$refs.myChart; this.chart=echarts.init(dom); }, drawEcharts(){//绘制echarts this.chart.setOption(this.option); }, }, mounted(){ this.initData(); this.initEcharts(); }, updated(){ this.drawEcharts(); } } </script>
原文地址:https://www.cnblogs.com/wuguanglin/p/EchartAndVue.html
时间: 2024-11-08 19:14:05