1. fetch()

fetch() 是浏览器提供的原生 API，用于向网络发送请求并获取响应数据。它常常用于从服务器或本地文件加载数据

fetch(url, options)
  .then(response => response.json())  // 处理响应并解析成 JSON
  .then(data => {
    // 使用解析后的数据
  })
  .catch(error => {
    // 捕获和处理请求或解析过程中发生的错误
  });

• fetch(url)：发起一个 HTTP 请求，url 是请求的资源地址，可以是一个外部 URL，也可以是本地文件。
• options（可选）：指定 HTTP 请求的一些选项（例如请求方法、头信息、请求体等）。

 

2. reduce()

reduce() 是 JavaScript 中数组的一个非常强大的方法，它可以通过对数组中的每个元素执行一个 累积操作，最终计算出一个单一的值。reduce() 会遍历数组，并应用给定的回调函数（每次循环时都调用该函数），直到所有的元素都被处理。

array.reduce((accumulator, currentValue, currentIndex, array) => {
  // 对 accumulator 进行操作
}, initialValue);

• accumulator（累加器）：这是回调函数的第一个参数，保存每一次迭代的结果（可以理解为“累计值”）。在第一次迭代时，accumulator 的值是 initialValue，如果没有提供 initialValue，则是数组的第一个元素。

• currentValue（当前值）：这是回调函数的第二个参数，表示当前正在处理的元素。

• currentIndex（当前索引）：这是回调函数的第三个参数，表示当前元素的索引。

• array：这是回调函数的第四个参数，表示原始数组。

• initialValue（可选）：这是 reduce() 的第二个参数，表示累加器的初始值。如果不提供，累加器的初始值是数组中的第一个元素。

reduce() 的作用

• reduce() 通过一个函数累积处理数组中的每个元素。
• 可以用于求和、计算平均值、找出最大值、去重、分组等各种操作。
• 它返回的结果通常是一个单一的值，可以是任何类型（数字、数组、对象等）。

 

3. echarts的指南操作（图表制作）

安装

npm install echarts --save

 创建 ECharts 实例

要使用 ECharts，你首先需要通过 echarts.init() 创建一个实例，并为它指定一个 HTML 容器来展示图表。

<div id="chart" ></div>

const chart = echarts.init(document.getElementById('chart'));

 设置图表的配置项 (Option)

ECharts 使用一个名为 option 的对象来配置图表的各项参数。这个对象包含图表的所有配置项，例如图例、坐标轴、数据系列等

title (标题)

title 用于配置图表的主标题和副标题。它有两个主要属性：text 和 subtext。

title: {
  text: '主标题', // 主标题文本
  subtext: '副标题', // 副标题文本
  left: 'center', // 标题位置（left, center, right）
  top: 'top', // 标题垂直方向的位置（top, middle, bottom）
  textStyle: {
    color: '#333', // 主标题颜色
    fontSize: 18, // 主标题字体大小
    fontWeight: 'bold' // 主标题字体粗细
  }
}

tooltip (提示框)

tooltip 用于展示数据项的提示框。当用户鼠标悬停到图表的某个数据点上时，ECharts 会显示该点的数据详情。

tooltip: {
  trigger: 'axis', // 触发方式（item：触发每个图形项，axis：触发坐标轴）
  formatter: '{b}<br>{a}: {c}', // 提示框内容格式化
  backgroundColor: 'rgba(50,50,50,0.7)', // 提示框背景色
  borderColor: '#fff', // 边框颜色
  borderWidth: 1, // 边框宽度
  textStyle: {
    color: '#fff', // 文字颜色
    fontSize: 14, // 字体大小
  }
}

legend (图例)

legend: {
  data: ['系列1', '系列2'], // 图例项，数组中列出所有需要展示的系列名称
  orient: 'horizontal', // 图例的排列方式（horizontal: 横向，vertical: 纵向）
  left: 'center', // 图例的位置
  top: 'top',
  itemWidth: 15, // 图例标识的宽度
  itemHeight: 10, // 图例标识的高度
  textStyle: {
    color: '#333', // 图例文本颜色
    fontSize: 12
  }
}

grid (网格)

grid: {
  left: '10%', // 网格左边距
  right: '10%', // 网格右边距
  top: '15%', // 网格上边距
  bottom: '10%', // 网格下边距
  containLabel: true // 是否包含坐标轴标签
}

 

xAxis / yAxis (坐标轴)

 ECharts 支持多种类型的坐标轴，通常包括 xAxis（横坐标）和 yAxis（纵坐标）。你可以配置坐标轴的类型、数据、刻度等。

xAxis: {
  type: 'category', // 坐标轴类型（category: 类目轴，value: 数值轴，time: 时间轴）
  data: ['一月', '二月', '三月', '四月'], // 类目数据（适用于类目轴）
  axisLabel: {
    rotate: 45, // 旋转标签文字
    interval: 0 // 标签间隔
  },
  axisLine: {
    show: true, // 是否显示坐标轴
    lineStyle: {
      color: '#333' // 坐标轴颜色
    }
  },
  axisTick: {
    show: true, // 是否显示刻度线
    length: 6, // 刻度线长度
  }
}

yAxis: {
  type: 'value', // 数值型坐标轴
  axisLabel: {
    formatter: '{value} 单位', // 设置标签显示格式
  },
  axisLine: {
    show: true,
    lineStyle: {
      color: '#333'
    }
  },
  axisTick: {
    show: true
  }
}

series (数据系列)

series 用于配置图表中显示的数据。ECharts 支持多种图表类型，每个图表类型对应不同的配置项。例如，折线图、柱状图、饼图、散点图等。

 折线图（line）

series: [
  {
    name: '销量', // 系列名称
    type: 'line', // 图表类型（line: 折线图）
    data: [10, 20, 30, 40, 50], // 数据
    smooth: true, // 是否平滑曲线
    itemStyle: {
      color: '#ff0000', // 数据点的颜色
    },
    lineStyle: {
      color: '#00ff00', // 曲线的颜色
      width: 2, // 曲线宽度
    },
    markPoint: {
      data: [
        { type: 'max', name: '最大值' }, // 标记最大值
        { type: 'min', name: '最小值' }  // 标记最小值
      ]
    }
  }
]

 

柱状图（bar）

series: [
  {
    name: '销售量',
    type: 'bar', // 图表类型（bar: 柱状图）
    data: [120, 200, 150, 80, 70], // 数据
    itemStyle: {
      color: '#3388ff', // 设置柱状图的颜色
    }
  }
]

饼图（pie）

series: [
  {
    name: '访问来源',
    type: 'pie', // 图表类型（pie: 饼图）
    radius: '50%', // 饼图半径
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' }
    ],
    label: {
      show: true, // 是否显示标签
      formatter: '{b}: {c} ({d}%)', // 标签内容格式化
    }
  }
]