16-深拷贝浅拷贝- 用于 echarts 封装 - 深拷贝浅拷贝-摸鱼没重点没写完

63 阅读2分钟

1.这两天的工作内容是美化页面,我也对美化没有什么心得,所以就提一下接下来我可能要做的事情之一:

  • echarts 的封装,一个图表它的展示-要调用 init 初始化,使用初始化后的实例 设置 setOption 图表的配置信息。讲究一点的还会给图表设置一个 监听屏幕大小随之自适应的 resize。
<template>
<div class="chart"></div>
</template>
<script>
import * as echarts from "echarts";
mounted(){
    // 获取实例对象 真实BOM
    const chart = this.$refs.chart;
    // 初始化图表
    let myChart = echarts.init(chart);
    // 设置配置项--图表的描述信息-接收一个对象作参数
    myChart.setOption({
        xAxis:{ // 横轴 },
        yAxis:{ // 纵轴 },
        series:{ // 数值 }
    })
},
methods:{
    
}
</script>

如果只用一两次图表的话将这个过程写下来也并不费事,但若是用四五次,那就要考虑封装将 上述步骤节省下来。 毕竟一个页面也并不只是图表,加上图表的这一堆配置乱糟糟的不利于代码维护

  • 只是简单 封装下来也并不是就十分方便了,如一个页面有五六样式相等的个图,虽然少些了几个获取和设置的步骤,但相同样式的配置代码也一样来回出现 五六次 尤其是相对复杂的样式

  • 深拷贝浅拷贝在这里的角色就是与默认设置进行比对,将没有出现过,或是不同的配置替换到上面去。类似于做菜,放过盐也就不会再放了,没有放还是需要的。

  • 我先前封装用到的是 Object.assign 但他是浅拷贝,对于深层次的 属性无法进行处理。

  • 做事之前先想,并按照屡好的思路去做,这样不会迷路。

// 首先对比一级是否存在,存在进行下一级比较,没有就添加上
// 准备数据
let optionDefault = {
    title:{
        text:'瓜果销售额统计图',
        subtext:'500g/元'
    },
    xAxis:{
        data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
    },
    series:{
        type:'bar',
        name:'销售'
        data:[8903,4832,1074,1539,8762,1096,2447]
    }
}

// 新数据对老数据的series.data 值进行覆盖,及添加一个 指示器 和柱体的颜色
let newData = {
    series:{
        data[12321,43254,546567,234242,123432,18907,38797]:
    },
    tooltip: {
        trigger: 'axis'
    },
}

let contrast = (oder,newValue)=>{
 
}