echart学习 - 折线图封装

Posted 2022-02-02 前端e站

今天在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、那就快来联系小站，和小站的小伙伴们一起加油！