vue中如何使用echarts

在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新

主要是以下几步:

  1. echarts的option配置项放在在data(){}或者computed(){}中
  2. 在mounted(){}生命周期去初始化数据,初始化echarts
  3. 在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>

 

posted @ 2018-06-09 21:27  汕大小吴  阅读(2203)  评论(0编辑  收藏  举报