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

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<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="{width: 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;
      width: 0;
    }
    .progress-bar-success{
      background:linear-gradient(to right,#76EE00,#CD0000);
    }
  </style>