vue+echarts，终于明白了vue的一些组件的事儿

最新推荐文章于 2024-05-17 07:04:18 发布

weixin_33795743

最新推荐文章于 2024-05-17 07:04:18 发布

阅读量1.7k

点赞数

文章标签： javascript 数据库前端 ViewUI

原文链接：https://my.oschina.net/lanhui/blog/1863048

版权

为什么80%的码农都做不了架构师？>>>

需求：

一个页面内，分页显示多个统计图表，要求用vue的组件，来进行绘制图表

难题：

一是我们用的是jquery+html5+js+echarts+vue，就是直接页面引用vue.min.js的方式，一开始以为会不行，但是最后发现结果是可以的hiahiahia~。

二是我们统计图的重绘很奇怪，因为涉及到父子组件的数据变化，然后例如说，一般流程是这样的：打开页面，加载父组件，父组件调用ajax请求查询的分页结果数据，然后对页面的子组件进行绘制，传递对应的数据到子组件进行自行绘统计图。但是点击分页的查询时，发现实际上数据变化了，但是图表并没有重新绘制。后来才知道是子组件（统计图组件）里面需要加上watch的方法去监测数据变化后触发重绘的动作。

贴代码

【html的页面代码】

1、引入vue

	<script src="/plugins/vue.js"></script>

2、父子组件嵌套

<div class="div-main" id="wrapper">
    <linechart v-for="(arrayItem, index) in wrapperVueArray"
									   :key="arrayItem.id"
									   :propoption="arrayItem.option"
									   :propitemid="arrayItem.id" >
						</linechart>
</div>

【父组件代码】

/*
 * 父组件代码
 */
var wrapperVue = new Vue({
    el: "#wrapper",
    data: {
        model: {
            total: "", //总数量
            size: "3", //每页显示条目个数不传默认20
            page: "1", //当前页码
        },
        wrapperVueArray: [],
    },
    created: function () {
        var self = this;
        self.getList();
    },
    methods: {
        //页码切换执行方法
        pageFn: function (val) {
            this.model.page = val;
        },
        //搜索
        goSearch: function () {
            var self = this;
            self.model.page = 1;
            self.getList();
        },
        getList: function () {
            var self = this;
            var queryUrl = '...';//ajax的Url
            var queryData = {
                //...ajax的post参数
            };
            var queryObj = JSON.stringify(queryData);
            ComPageOpt.util.queryAjax(queryUrl, queryObj, '', '', '', '', function (data) {
                self.wrapperVueArray = data.data;//设置图表绘制的数据数组（data是符合echart对应的option参数的结构）
                self.model.total = data.data.total_size;//分页组件的总条数，分页组件自动分页
            });
        }
    }
})

【子组件代码】

/**
 *子组件代码
*/
Vue.component('linechart', {
    data() {
        return {//子组件内部数据
            itemid: this.propitemid,
            option: this.propoption,
            mychart : null
        }
    },
    props: {//子组件可以被页面html的dom元素暴露出来的属性
        propitemid: String,
        propoption: {//因为这个propoption是图表的数据，所以必须是Object类型
            type: Object,
            default(){
                return {};
            }
        }
    },
    watch:{//用于监测子组件暴露的属性值变化所触发的动作
        propoption:{
            handler(newValue){
                this.option = newValue;
                this.redrawChart();
            }
        }
    },
    //组件template的内容
    template: '<div class="echarts" v-bind:id="itemid"></div>',
    mounted: function () {
        this.drawLineGraph();
    },
    methods: {
        //图表绘制
        drawLineGraph() {
            //# 1. 获取一个用于挂在 echarts 的 DOM 元素
            let $echartsDOM = document.getElementById(this.itemid);//此处用组件内部的属性数据
            //# 2. 初始化
            if(this.mychart==null){
                let myEcharts = echarts.init($echartsDOM);
                this.mychart = myEcharts;
            }
            //# 3. 设置配置项
            let option = this.option;//此处用组件内部的属性数据
            //# 4. 为 echarts 指定配置
            this.mychart.setOption(option);
        },
        redrawChart(){
            this.drawLineGraph();
        }
    }
});

亲测可用，大家可以试试哈哈哈~

ε≡٩(๑>₃<)۶ 一心向学

(๑╹ヮ╹๑)ﾉ Studying makes me happy

转载于:https://my.oschina.net/lanhui/blog/1863048