<template>
 <div ref="dom" class="charts chart-bar"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from '_c/charts/theme.json' // 這是我自己寫(xiě)的主題文件，可以不用管
import { on, off } from '@/libs/tools' // 這是其他一些方法函數(shù)，可以不管
echarts.registerTheme('tdTheme', tdTheme)
export default {
 name: 'ChartLine',
 props: {
 text: String,
 subtext: String,
 yName: String
 },
 data () {
 return {
  dom: null,
  symbolSize: 5,
　　　　// 通過(guò)拖動(dòng)是可以實(shí)時(shí)改變這里的值的
  data: [[0, 10], [1, 10], [2, 20], [3, 30], [4, 36], [5, 20], [6, 25], [7, 20], [8, 21], [9, 22],
  [10, 23], [11, 25], [12, 10], [13, 11], [14, 19], [15, 20], [16, 12], [17, 13], [18, 12], [19, 9],
  [20, 21], [21, 18], [22, 10], [23, 12]]
 }
 },
 methods: {
 resize () {
  this.dom.resize()
 }
 },
 mounted () {
 this.dom = echarts.init(this.$refs.dom, 'tdTheme')
 this.dom.setOption({
  title: {
  text: this.text,
  subtext: this.subtext,
  x: 'center'
  },
  grid: {
  left: 50,
  top: 40
  },
  tooltip: {
  trigger: 'axis'
  },
  xAxis: {
  min: 0,
  max: 23,
  type: 'value',
  axisLabel: {
   formatter (value) {
   return value + ':00' // 格式時(shí)間顯示方式
   }
  },
  axisLine: { onZero: false }
  },
  yAxis: {
  min: 4,
  max: 36,
  type: 'value',
  name: this.yName,
  axisLine: { onZero: false }
  },
  series: [
  {
   id: 'a',
   type: 'line',
   smooth: true,
   symbolSize: this.symbolSize, // 為了方便拖拽，把 symbolSize 尺寸設(shè)大了。
   data: this.data
  }
  ]
 })
 this.dom.setOption({
  graphic: echarts.util.map(this.data, (dataItem, dataIndex) => {
  const that = this // 因?yàn)閛ndrag函數(shù)必須在回調(diào)內(nèi)使用this.position獲取實(shí)時(shí)坐標(biāo)，此處必須用that替換this
  return {
   // 'circle' 表示這個(gè) graphic element 的類(lèi)型是圓點(diǎn)。
   type: 'circle',
   shape: {
   // 圓點(diǎn)的半徑。
   r: this.symbolSize / 2
   },
   // 用 transform 的方式對(duì)圓點(diǎn)進(jìn)行定位。position: [x, y] 表示將圓點(diǎn)平移到 [x, y] 位置。
   // 這里使用了 convertToPixel 這個(gè) API 來(lái)得到每個(gè)圓點(diǎn)的位置
   position: this.dom.convertToPixel('grid', dataItem),
   // 這個(gè)屬性讓圓點(diǎn)不可見(jiàn)（但是不影響他響應(yīng)鼠標(biāo)事件）。
   invisible: true,
   // 這個(gè)屬性讓圓點(diǎn)可以被拖拽。
   draggable: true,
   // 把 z 值設(shè)得比較大，表示這個(gè)圓點(diǎn)在最上方，能覆蓋住已有的折線圖的圓點(diǎn)。
   z: 100,
   ondrag: echarts.util.curry(function (dataIndex) { // 此處必須用匿名函數(shù)，不能用箭頭函數(shù)，否則拿不到拖動(dòng)的坐標(biāo)
   let origin = that.dom.convertToPixel('grid', that.data[dataIndex]) // 得到每個(gè)圓點(diǎn)原始位置
   // let maxY = that.dom.convertToPixel('grid', [40, 36]) // 最高溫度為36攝氏度，暫未做封裝
   // 超過(guò)最高溫度36將不能拖動(dòng),寫(xiě)死的最低點(diǎn)高度為240，最高點(diǎn)為40
   if (this.position[1] > 240) {
    this.position[1] = 240
   } else if (this.position[1] < 40) {
    this.position[1] = 40
   }
   this.position[0] = origin[0] // 控制每個(gè)點(diǎn)位只能在y軸方向移動(dòng)
   // this.position[1] = origin[1] // 控制每個(gè)點(diǎn)位只能在x軸方向移動(dòng)
   // 實(shí)時(shí)獲取拖動(dòng)的點(diǎn)位信息并根據(jù)此信息重新畫(huà)圖
   that.data[dataIndex] = that.dom.convertFromPixel('grid', this.position)
   that.dom.setOption({
    series: [{
    id: 'a',
    data: that.data
    }]
   })
   }, dataIndex)
  }
  })
 })
 on(window, 'resize', this.dom.setOption({
  graphic: echarts.util.map(this.data, (item, dataIndex) => {
  return {
   position: this.dom.convertToPixel('grid', item)
  }
  })
 }))
 },
 beforeDestroy () {
 off(window, 'resize', this.resize)
 }
}
</script>