echarts图表项目预演-526互联

option = {
  title: {
    text: '平均心率曲线',
    textStyle: {
      fontSize: 12,
      fontWeight: 400
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    icon: 'circle',
    bottom: '0',
    data: ['男生', '女生'],
    right: 'center',
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: '#556677'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '4%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['15:10', '15:14', '15:18', '15:26', '15:30', '15:40', '15:50']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} 次/分'
    }
  },
  series: [
    {
      name: '男生',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: [120, 132, 101, 134, 140, 85, 75],
      
    },
    {
      name: '女生',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: [100, 110, 20, 60, 80, 72, 60],
      markLine: {
        silent: true, //鼠标悬停事件,true悬停不会出现实线
        symbol: 'none', //去掉箭头
        data: [
          [
            {
              coord: ['15:18', 0],
              label: {
                show: true,
                position: 'end',
                formatter: `第一阶段`,
                color: '#32383B',
                height: 10,
                padding: [12, 12, 7, 12],
                lineHeight: 10,
                borderWidth: 1,
                borderColor: '#F7B500',
                borderRadius: 2,
                fontWeight: 700,
                fontFamily: 'HYQiHeiX1-GEW',
                backgroundColor: 'white'
              },
              lineStyle: {
                width: 1,
                color: '#F7B500'
              }
            }, //[x第几个（从0开始），y轴起始点]
            { coord: ['15:18', 250] } //[x第几个（从0开始），y轴起始点]
          ],
          [
            {
              coord: ['15:26', 0],
              label: {
                show: true,
                position: 'end',
                formatter: `第二阶段`,
                color: '#32383B',
                height: 10,
                padding: [12, 20, 7, 20],
                lineHeight: 10,
                borderWidth: 1,
                borderColor: '#0067B2',
                borderRadius: 2,
                fontWeight: 700,
                fontFamily: 'HYQiHeiX1-GEW',
                backgroundColor: 'white'
              },
              lineStyle: {
                width: 1,
                color: '#F7B500'
              }
            }, //[x第几个（从0开始），y轴起始点]
            { coord: ['15:26', 250] }
          ]
        ]
      }
    }
  ]
};

图表预演二：

const markLine = [{
  name:'第一阶段', // 标签名称
  xAxis: '01:15', // x 值为给定值的标记线
    label:{
      show:true, // 是否显示标签
      position:'end', // 标签位置
      formatter:'{b}', //字符串模板 {a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比。
    }
  },{
  name:'第二阶段',
  xAxis: 1.4,
    label:{
      show:true,
      position:'end',
      formatter:'{b}',
    }
  },{
  name:'第三阶段',
  xAxis: 1.8,
  label:{
    show:true,
    position:'end',
    formatter:'{b}',
  }
}];
// const positions = [
//   'start',
//   'middle',
//   'end',
//   'insideStart',
//   'insideStartTop',
//   'insideStartBottom',
//   'insideMiddle',
//   'insideMiddleTop',
//   'insideMiddleBottom',
//   'insideEnd',
//   'insideEndTop',
//   'insideEndBottom'
// ];
// for (var i = 0; i < positions.length; ++i) {
//   markLine.push({
//     name: positions[i],
//     xAxis: 1.8 - 0.2 * Math.floor(i / 3),
//     label: {
//       formatter: '{b}',
//       position: positions[i]
//     }
//   });
//   if (positions[i] !== 'middle') {
//     const name =
//       positions[i] === 'insideMiddle' ? 'insideMiddle / middle' : positions[i];
//     markLine.push([
//       {
//         name: 'start: ' + positions[i],
//         coord: [0, 0.3],
//         label: {
//           formatter: name,
//           position: positions[i]
//         }
//       },
//       {
//         name: 'end: ' + positions[i],
//         coord: [3, 1]
//       }
//     ]);
//   }
// }
option = {
  animation: false,
  textStyle: {
    fontSize: 14
  },
  xAxis: {
    data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
    boundaryGap: true,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    max: 2
  },
  series: [
    {
      name: 'line',
      type: 'line',
      stack: 'all',
      symbolSize: 6,
      data: [1,2,3,4,5],
      markLine: {
        data: markLine,
        label: {
          distance: [20, 8]
        }
      }
    }
  ],
  grid: {
    top: 30,
    left: 60,
    right: 60,
    bottom: 40
  }
};

图表