今天在echart的基础上做了一个折线图的封装,接下来就来说说函数封装的一个小思路
1、认识变量
1.1 data1,data2,id,nameArr
注:不建议学小编这样把变量名命名的这么随意哈
id:传入函数的第一个参数。里面包含echart的id,渲染视图的主键。
data1:传入函数的第二个参数。里面包含{xAxisData, yAxisData}
data2:传入函数的第三个参数。里面包含{xAxisData, yAxisData}
nameArr:传入函数的第四个参数。里面包含的是每一个echart对应的legend内容
... 这里还可以根据自己不同的需求对该函数(组件)进行扩展
2、简述思路
组件的定义 - 面向过程的编程重用函数、面向对象的编程重用类、范型编程重用的是算法的源代码,而组件编程则重用特定功能完整的程序模块。
这里的思路相当于 设计模式中的 - 策略模式,通过传参的方式来扩展自己的函数(组件)。
最重要的,函数的封装肯定会涉及到很多变量,所以在我们使用变量的同时要做好逻辑的收敛,比如:nameArr || [] ,data1?data1.yAxisData:[]
// 折线图封装
setLineChartOptions = (id: string, data1: Object, data2: Object, nameArr: Object) => {
const oneChart = echarts.init(document.getElementById(id));
console.log(oneChart, 'myChartmyChartmyChartmyChart', data1, data2)
let option = {
tooltip: {
trigger: 'axis',
textStyle:{
align:'left'
}
},
legend: {
data: nameArr||[],
textStyle: { // 图列内容样式
color: '#ffffff', // 字体颜色
},
tooltip: {
show: true
},
left: 'center'
},
xAxis: {
type: 'category',
// 隐藏网格线
splitLine: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "#ffffff" // x轴轴线颜色
}
},
data: data1?data1.xAxisData:[]
},
yAxis: {
type: 'value',
// 设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ['#ffffff20'],
width: 1,
type: 'solid'
}
},
axisLine: {
show: true,
lineStyle: {
color: "#ffffff" // x轴轴线颜色
}
},
axisTick: {
show: false
},
},
series: [
{
name: nameArr?nameArr[0]:"",
symbolSize: 2, // 拐点圆的大小
color: ['#fb3878'], // 折线条的颜色
data: data1?data1.yAxisData:[],
type: 'line',
smooth: true
},
{
name: nameArr?nameArr[1]:"",
symbolSize: 2, // 拐点圆的大小
color: ['#44d7b6'], // 折线条的颜色
data: data2?data2.yAxisData:[],
type: 'line',
smooth: true
}
]
}
oneChart.setOption(option);
window.addEventListener("resize", () => {
oneChart.resize();
})
}
长按二维码识别添加小站
1、如果你有好的技术文章。
2、如果你有需要的技术分享主题。
3、如果你有面试上的问题(包括简历、面试题)
4、那就快来联系小站,和小站的小伙伴们一起加油!