全解echarts之折线图

  图1   图2

let option = { // 配置项
  title: {
    text: '如厕检测(次)',
    textStyle: {
      color: '#fff'  // 标题字体颜色，类似还有fontSize: 10等等（采用驼峰式）
    }
  },
// tooltip: {
//   trigger: 'item',
//   formatter: "{a} <br/>{b} : {c} 次"
// },
  tooltip: { // 鼠标放上去出现相对应的数据
    trigger: 'axis' // item单独一个显示，axis全部显示（多个折线）
  },
  grid: { // 图和上下左右之间的距离
    left: '4%',
    right: '8%',
    top: '30%',
    bottom: '16%',
    containLabel: true  // 防止显示不全面
  },
  legend: {  // 声明那一块是那一部分
    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    data: this.legendArrO  // 表头数据
  },
  xAxis: {  // x轴坐标设置
    type: 'category',
    // data: ['2019-0-6', '2019-07-21', '2019-07-22', '2019-07-23', '2019-07-24', '2019-07-25', '2019-07-26'],
    data: this.xAxisArrO,  // x轴数据
    // boundaryGap: false,  // 曲线，false从0开始,true非0开始，默认true
    axisLine: {
       lineStyle: {
          color: '#162346' // x轴坐标横线颜色
       }
    },
    axisLabel: {
      color: '#4F648C', // x轴坐标文字颜色
      interval: 0, //该属性设置成0则表示强制显示所有标签，设置为1的话，隔一个标签显示一个标签，以此类推。
      rotate: 45 //rotate表示倾斜显示，-是顺时针旋转多少度，+或不写表示逆时针旋转多少度，默认值为90
    }
  },
        yAxis: {  // y轴坐标设置(自动生成不用设置y轴值，要设置得定义一个data)
          type: 'value',
          splitNumber: 2, //横线数轴多少条
          axisLine: {
            lineStyle: {
              color: '#162346' // y轴坐标横线颜色
            }
          },
          axisLabel: {
            color: '#4F648C'  // y轴坐标文字颜色
          }
        },
        series: [{
          data: this.seriesArrO,   // x轴数据
          // data: ['20', '32', '1', '23', '1', '10', '10'],
          type: 'line',
          smooth: true,  // 折线点是否圆形
          symbolSize: 7,  // 折线点圆形的大小
          label: { // 折线图上曲线的值
            normal: {
              show: true,
              position: 'top',  // 显示的值标在上面
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#218FFE'
            }
          },
          markPoint: { // 显示最大值和最小值
            data: [{
              name: '最大值',
              type: 'max'
            },{
              name: '最小值',
              type: 'min'
            }]
          },
          areaStyle: { // 折线下面颜色区域（渐变效果）
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 折线往下渐变
                offset: 0,  // 设置为1如图二（下面一个可去掉）
                color: '#1E75D5'
              }, {
                offset: 1,
                color: 'rgba(0, 0, 0, 0)'
              }], false), // false 显示，true不显示。默认显示
              opacity: 0.8
            }
          }
        }]
      }
      echarts.init(document.getElementById('lifeOne')).setOption(option) // 初始化

参数data一般都是图表的数据部分