vue与echarts结合使用

Posted 2023-03-12

参考技术A echarts中各类表新建为组件，注意点：

1.防止出现图表已经初始化，但是数据还没有同步过来的问题；

2.新建为组件的方式：

注册echarts，以及主题，在nextTick方法中正常填写图的option配置，

3.如果图表页面有tab切换，需要在结尾添加：

dom.setOption(option,true)：表示数据会被更新

dom.resize();表示图大小在切换tab的时候会正常；

vue中如何使用echarts

在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>