echarts 折线配置项内容和展示

      const ratio = (val) => {
  return window.screen.width * val / 1980;

}

option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  grid: {
    top: "20%", // 等价于 y: '16%'
    left: "4%",
    right: "2%",
    bottom: "6%",
    containLabel: true,
  },
  // tooltip: {
  //   trigger: 'axis',
  //   axisPointer: {
  //     // 横向 x轴
  //     // type: 'cross',
  //     label: {
  //       backgroundColor: '#6a7985'
  //     }
  //   }
  // },
  tooltip: {
    //鼠标悬停提示内容
    trigger: "axis", // 触发类型，默认数据触发，可选为：'axis' item
    axisPointer: {
      label: {
        formatter(params) {
          return ''
        }
      },
      // 坐标轴指示器，坐标轴触发有效
      type: "line", // 默认为直线，可选为：'line' | 'shadow'
      // label: "cross",
      // show: true,
    },
    backgroundColor: 'rgba(52, 84, 104, 0.8)',
    borderColor: 'rgba(52, 84, 104, 0)',
    textStyle: {
      color: 'rgba(0, 249, 255, 1)'
    }
  },
  legend: {
    itemWidth: ratio(10),
    itemHeight: ratio(10),
    icon: "circle",
    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
    orient: "horizontal",
    // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
    x: "right",
    // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
    y: "6%",
    // data: [1, 2, 3, 4, 5, 6, 7],
    textStyle: {
      color: "#00ffff",
      fontSize: ratio(10),
      fontWeight: 300,
      padding: [0, 0, 0, 0],
    },
    // 点的联动
    selectedMode: false,
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },

  // xAxis: [
  //   {
  //     type: 'category',
  //     boundaryGap: false,
  //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  //   }
  // ],
  xAxis: {
    type: "category",
    // x轴两两边留白
    boundaryGap: true,
    name: "",
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    //  改变x轴颜色
    axisLine: {
      lineStyle: {
        color: "#345468",

      },

    },
    //  改变x轴字体颜色和大小
    axisLabel: {
      interval: 0,
      inside: false,
      rotate: 30,
      textStyle: {
        color: "#62B4BB",
        fontSize: ratio(12),

      },
    },
    // 坐标刻度
    axisTick: {
      show: false,
      alignWithLabel: true
    },


  },
  // yAxis: [
  //   {
  //     type: 'value'
  //   }
  // ],
  yAxis: {
    // type: 'value'
    type: "value",
    name: "",
    // min: 0,
    // max: 45,
    // interval: 5, //间隔
    // minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
    axisLine: {
      lineStyle: {
        color: "#2A5D75",
      },
    },
    //  改变y轴字体颜色和大小
    axisLabel: {
      formatter: "{value}", //  给y轴添加单位
      textStyle: {
        color: "#8ACDF3",
        fontSize: "12",
      },
    },
    // x轴平行线
    splitLine: {
      lineStyle: {
        color: "#345468",
        type: 'dashed'
      },
    },
  },
  series: [
    {
      name: '未完成',
      type: 'line',
      stack: '总量',
      smooth: true,
      lineStyle: {
        //设置折线色颜色
        color: "#07DAFF",
      },
      itemStyle: {
        //设置折线折点的颜色
        normal: {
          color: "#07DAFF",
          // 标记内容
          // label: { show: true }
        },
      },
      // lineStyle: {
      //   width: 0
      // },
      // 点的展示
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgb(50, 175, 195)'
        }, {
          offset: 1,
          color: 'rgb(25, 88, 98)'
        }])
      },
      // emphasis: {
      //   focus: 'series'
      // },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: '已完成',
      type: 'line',
      stack: '总量',
      // 平滑曲线
      smooth: true,
      // lineStyle: {
      //   width: 0
      // },
      lineStyle: {
        //设置折线色颜色
        color: "#1753D9",
      },
      itemStyle: {
        //设置折线折点的颜色
        normal: {
          color: "#1753D9",
          // label: { show: true }
        },
      },
      // 点的展示
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgb(23, 83, 217)'
        }, {
          offset: 1,
          color: 'rgb(52, 84, 104)'
        }])
      },
      // emphasis: {
      //   focus: 'series'
      // },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
  ]
};