折线图配置

 折线图配置

const options = (data) => {
  return {
    tooltip: {   //提示框
      trigger: 'axis',
      backgroundColor: '#fff',
      borderColor: 'transparent',
      padding: [0, 0, 0, 0],
      formatter: (params) => {
      
         //自己的逻辑，可使用模版字符串
        let tip = `<div class="pie-tooltip-div line-chart-tooltip">
            <p class="time">${params[0].name}<p>`
      
        return (tip += `</div>`)
      }
    },
    grid: {
      top: 15,
      left: 24,
      right: 10,
      bottom: 50,
      containLabel: true
    },
    dataZoom: [
      // 区域缩放
      {
        id: 'dataZoomX',
        show: data.xData.length !== 0, // 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
        type: 'slider', // slider表示有滑动块的，inside表示内置的
        filterMode: 'filter', // 'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
        // 'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
        // 'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
        // 'none': 不过滤数据，只改变数轴范围。
        start: 0, // 数据窗口范围的起始百分比,表示30%
        end: data.xData.length < 30 ? 100 : (30 / data.xData.length) * 100, // 数据窗口范围的结束百分比,表示70%
        orient: 'horizontal', // 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock: false, // 是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle: 100, // 设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel: true, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove: true // 如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
        // left: 'center', // 组件离容器左侧的距离,'left', 'center', 'right','20%'
        // top: 'top', // 组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        // right: 'auto', // 组件离容器右侧的距离,'20%'
        // bottom: 'auto' // 组件离容器下侧的距离,'20%'
      }
    ],

    xAxis: [
      {
        type: 'category',
        data: data.xData,
        // 修改文本的颜色
        axisLabel: {
          show: true,
          color: '#999',
          fontSize: 12
        },
        axisTick: {
          show: false
        },
        // 修改轴线的颜色
        axisLine: {
          lineStyle: {
            color: '#EFEFEF'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#999',
          fontSize: 12,
          formatter: data.unit ? '{value}%' : '{value}' // y轴1%-100%格式化
        }
      }
    ],
    series: data.yData
  }
}