echart学习 - 折线图封装

最新推荐文章于 2023-10-25 15:59:48 发布

前端e站

最新推荐文章于 2023-10-25 15:59:48 发布

阅读量1k

点赞数 4

分类专栏： canvas JavaScript 文章标签：前端组件化

本文链接：https://blog.csdn.net/qq_39606853/article/details/121615616

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 2 订阅

订阅专栏

canvas

3 篇文章 1 订阅

订阅专栏

本文介绍了一种基于ECharts的折线图封装方法，通过传入参数实现功能扩展。文中详细阐述了封装思路，涉及变量的定义、组件重用策略，并提供了具体的代码示例，展示了如何创建并配置折线图选项，包括提示框、图例、坐标轴等元素。同时，文章鼓励读者分享技术文章、参与技术讨论和面试问题解答。

摘要由CSDN通过智能技术生成

今天在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();
    })
  }