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)=>{
}