码迷,mamicode.com
首页 > 其他好文 > 详细

vue中如何使用echarts

时间:2018-06-09 23:23:09      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:efault   bsp   数据   update   imp   如何使用   ted   art   null   

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

主要是以下几步:

  1. echarts的option设置在data(){}中
  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>

 

vue中如何使用echarts

标签:efault   bsp   数据   update   imp   如何使用   ted   art   null   

原文地址:https://www.cnblogs.com/wuguanglin/p/EchartAndVue.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!