Echarts---折线图--柱状图

　

<template>
  <div>
    <h2 style="float: right">
      <a-icon type="user" style=""/>{{ username }}
    </h2>
    <div>
      <a-row :gutter="24">
        <a-col :md="12" :lg="12">
          <h3>心率</h3>
          <span>{{ xinludata }}</span>
          <div id="myChart" class="notfound"></div>
          <h3>力竭状态</h3>
          <span>{{status}}</span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" :style="{ widthData + '%'}">
              <span class="sr-only">{{widthData}}%</span>
            </div>
          </div>
        </a-col>
        <a-col :md="12" :lg="12">
          <span>{{ peisudata }}</span>
            <div id="myChart1" class="notfound"></div>
        </a-col>
      </a-row>
    </div>
    <a-row>
      <a-col span="10">
        <a-button @click="handleGoBack">返回</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script src="https://unpkg.com/viser-vue/umd/viser-vue.min.js"></script>
<script>
import moment from 'moment'
import { STable } from '@/components'
import { getRoleList } from '@/api/manage'
import { getTrainingRecordPrecise } from '@/api/training'
export default {
  name: 'TrainingStatus',
  components: {
    STable,
  },
  data() {
    return {
      dateList: [],
      valueList: [],
      peopleparameterdata: [],//原生跑后台数据
      sourceData2:[], //原生化跑整理数据
      keydata:[],
      widthData: 0,//力竭状态数据
      status: '',
      xinludata: '',
      peisudata: '',
      username: '' // 队员名字
    }
  },
  props: ['record'],
  created () {
    // console.log('record是个啥：' + JSON.stringify(this.record))
    const getparam = {
      course_training_id: this.record.course_training_id,
      kind: 1
    }
    getRoleList({ t: new Date() })
    // console.log('向后台传递的参数' + JSON.stringify(getparam))
    getTrainingRecordPrecise(getparam).then(res => {
      // console.log('返回的状态数据' + JSON.stringify(res))
      this.username = res.data[0].name
      if (res.data[0].status == 0) {
       this.status = '暂无状态数据！'
      } else {
        this.widthData = res.data[0].status
      }
      if (res.data[0].heart_rate.xaxis.length !== 0) {
        // this.trainingdata = res.data[0].heart_rate
        this.dateList = res.data[0].heart_rate.xaxis
        this.valueList =  res.data[0].heart_rate.data
        this.drawLine()
      } else {
        this.xinludata = '暂无心率数据'
      }
      if (res.data[0].pace.length !== 0) {
        console.log('原生跑数据' + JSON.stringify(res.data[0].pace))
        this.peopleparameterdata = res.data[0].pace
        for (var j = 0; j < this.peopleparameterdata.length; j++) {
          var key1 = j + 1;
          this.keydata[j] = key1
          // console.log('没变化之前的数据' + this.peopleparameterdata[j])
          let value4 = this.peopleparameterdata[j].replace(/(w*)分(.*)秒/g, '$1:$2')
          let value2 = value4.split(':');
          // 这里可以换成以分钟为单位--
         // var hs = parseInt(value2[0] * 60);
          let ms = parseInt(value2[0] * 1);
          let ss = (value2[1] * 0.01);
          /*var hs = parseInt(value2[0] * 3600);
          var ms = parseInt(value2[1] * 60);
          var ss = parseInt(value2[2]);*/
          var value3 = ms + ss;
          this.sourceData2[j] = value3
        }
        console.log('原生跑配速key值' + this.keydata)
        console.log('原生跑配速' + this.sourceData2)
        this.drawLine1()
      } else {
        console.log('暂无配速数据')
        this.peisudata = '暂无配速数据'
        this.widthData = res.data[0].status
      }
    })
  },
  mounted(){
    // this.drawLine();
  },
  methods: {
    moment,
    drawLine(){
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        // Make gradient line here
        backgroundColor: ['#081944'], // 全图默认背景
        grid: [{
          show: false,
          borderWidth: 1,
        }],
        visualMap: [{
          show: false, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
          type: 'continuous', // 定义为连续型 visualMap
          seriesIndex: 0, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列
          min: 0, // 指定 visualMapPiecewise 组件的最小值。
          max: 400
        }],
        // 提示框组件
        tooltip: {
          trigger: 'axis' // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
        },
        xAxis: [{
          data: this.dateList,
          show: true //是否显示x轴
        }],
        yAxis: [{
          nameTextStyle: { // 坐标轴名称的文字样式。
            color: '#63B8FF',
            fontWeight:'bold', // 坐标轴名称文字字体的粗细
            fontSize: 15
          },
          name: '心率次数/bmp',
          splitLine: {
            show: true, // x轴、y轴显示网格线,坐标轴在 grid 区域中的分隔线
            lineStyle:{
              // 使用深浅的间隔色--分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
              color: ['#4F5258', '#30394F']
            }
          }
        }],
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          type: 'line', // 线条
          showSymbol: false, // 是否显示 symbol符号, 如果 false 则只有在 tooltip hover 的时候显示。
          data: this.valueList,
          lineStyle: {color: '#BA3945'}, // 线条样式
          markPoint: { // 图表标注
            data: [
              {
                type: 'max',
                name: '最高心率',
                label: {
                  formatter: "{c}"+"/bmp",
                  color: '#CCCCCC',
                  show: true,
                  offset: [-5,-10] // 是否对文字进行偏移。默认不偏移
                },
                symbolSize: [1, 1]
              },
              {
                type: 'min',
                name: '最小心率',
                label: {
                  formatter: "{c}"+"/bmp",
                  color: '#CCCCCC',
                  show: true,
                  position: 'bottom',
                  offset: [-5,5] // 是否对文字进行偏移。默认不偏移
                },
                symbolSize: [1, 1] // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
              }
            ],
            label: { // 标注的文本
              show: true
            },
            itemStyle: {
              color: '#081944', // 图形的颜色--设置这个是为了隐藏掉图标
              opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            }
          }
        }]
      });
    },
    drawLine1(){
      let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      myChart1.setOption({
        color: ['#3398DB'], // 柱状条颜色默认色板
        tooltip : { // 提示框
          trigger: 'axis', // 触发类型'axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true // 区域是否包含坐标轴的刻度标签。
        },
        xAxis : [
          {
            type : 'value',  // 数值轴，适用于连续数据
            show: false //是否显示x轴
          }
        ],
        yAxis : [
          {
            type : 'category', // 坐标轴类型- 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
            data : ['1', '2', '3', '4', '5'],
            axisTick: { // 坐标轴刻度相关设置-
              alignWithLabel: true // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
            },
            nameTextStyle: { // 坐标轴名称的文字样式。
              color: '#63B8FF',
              fontWeight:'bold', // 坐标轴名称文字字体的粗细
              fontSize: 15
            },
            name: '配速/分钟',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false // 是否显示坐标轴轴线。
            }
          }
        ],
        series : [
          {
            name:'配速时长',
            type:'bar', // 柱状/条形图
            barMaxWidth: '50%', // 柱条的最大宽度，不设时自适应。支持设置成相对于类目宽度的百分比
            data:[200, 334, 390, 330, 220],
            label:{ // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              normal: {
                formatter: "{c}"+"/分钟",
                show: true,
                position: 'insideLeft',
                offset: [20,0] // 是否对文字进行偏移。默认不偏移
              }
            },
            markPoint: { // 图表标注
              data: [
                {
                  type: 'max',
                  name: '最慢',
                  label: {
                    formatter: "{b}", // {b}：数据名
                    // color: '#CCCCCC',
                    show: true,
                    offset: [15,0]
                  },
                  symbolSize: [1, 1]
                },
                {
                  type: 'min',
                  name: '最快',
                  label: {
                    formatter: "最快" ,// {c}：数据值
                    // color: '#CCCCCC',
                    show: true,
                    offset: [15,0]
                    //position: 'bottom',
                  },
                  symbolSize: [1, 1] // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                }
              ],
              // symbol: 'none', // 标记的图形。circle-圆形,rect-方形
              label: { // 标注的文本
                show: true
              },
              itemStyle: {
                color: '#081944', // 图形的颜色--设置这个是为了隐藏掉图标
                opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              }
            }
          }
        ]
      })
    },
    handleGoBack () {
      this.$emit('onGoBack')
    },
    getFormatDate (times) {
      var nowDate = new Date(times);
      var year = nowDate.getFullYear();
      var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
      var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
      var hour = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();
      var minute = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
      var second = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
      //return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
      return  hour + ":" + minute +":" + second;
    }
  }
}
</script>
  <style lang="less" scoped>
    .notfound{
      height: 400px;
    }
    .progress{
      background-color: #f5f5f5;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
      height: 20px;
      margin-bottom: 20px;
      overflow: hidden;
    }
    .progress-bar{
      background-color: #337ab7;
      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
      color: #fff;
      float: left;
      font-size: 12px;
      height: 100%;
      line-height: 20px;
      text-align: center;
      transition: width 0.6s ease 0s;
       0;
    }
    .progress-bar-success{
      background:linear-gradient(to right,#76EE00,#CD0000);
    }
  </style>