<template>
  <div>
    <div class="charts" ref="charts" :style="{'height': height}"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import echarts from 'echarts'
  import {event} from 'common/js/event'
  //波浪折線圖
  export default {
    props:{
      title: {
        type: String,
        default: '預設標題'
      },
      xAxisDataArr: { //X軸資料
        type: Array,
        default: () => { return ['週一','週二','週三','週四','週五','週六','週日']}
      },
      seriesDataArr: {  //資料
        type: Array,
        default: () => { return [120, 132, 101, 134, 90, 230, 210] }
      },
      color: {  //顏色
        type: String,
        default: '#0076fe'
      },
      bgColor: {
        type: String,
        default: '#d1e3f8'
      },
      smooth: {   //true 平滑  false折線
        type: Boolean,
        default: true
      },
      fontSize: {
        type: Number,
        default: 12,
      },
      fontColor: {
        type: String,
        default: '#444'
      },
      fontWeight: {
        type: String,
        default: 'bold'
      },
      height: {
        type: String,
        default: '200px'
      },
      dataZoom: { //滑動
        type: Boolean,
        default: false
      },
      showLine: {  //是否顯示橫向網格線
        type: Boolean,
        default: true
      },
      tooltip: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {}
    },
    mounted () {
      this.initEcharts()
    },
    methods: {
      initEcharts () {
        let charts = echarts.init(this.$refs.charts);  //影響力趨勢
        let that = this
        charts.clear()
        charts.setOption({
          title: [{
            text: this.title,
            left: 'left',
            top: 10,
            textStyle: {
              color: this.fontColor,
              fontWeight: this.fontWeight,
              fontSize: this.fontSize,
              fontFamily: 'PingFangHK-Regular'
            }
          }],
          tooltip : {
            //trigger: 'axis',
            trigger: 'none',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
              crossStyle: {
                color: '#4f77aa'
              },
            },
            formatter: function(params) {return ''},
            show: this.tooltip,
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              axisLine: {show: false},
              axisTick:{
                show:false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#888',
                  fontSize: 11
                }
              },
              data : this.xAxisDataArr
            }
          ],
          yAxis : [
            {
              type : 'value',
              axisTick:{
                show:false   //  是否顯示座標軸刻度
              },
              axisLine: {show: false}, // 是否顯示座標軸軸線
              splitLine: {
                show: true,   // 是否顯示分隔線(網格線)
                lineStyle:{
                  color: '#eee',  // 分隔線(網格線)顏色
                  width: 0.5      // 分隔線(網格線)寬度
                }
              },
              axisLabel: {
                show: true,   //  是否顯示刻度值，X,Y軸值
                textStyle: {
                  color: '#888',
                  fontSize: 11
                }
              },
            }
          ],
          series : [
            {
              type:'line',  // line bar pie等等
              smooth: this.smooth,  // 是否平滑
              itemStyle: {   // 折線樣式。
                normal: {
                  color: this.color,
                },
              },
              lineStyle: { //  線條樣式
                normal: {
                  width: 1
                },
              },
              areaStyle: {  // 區域填充樣式
                normal: {
                  color: this.bgColor
                  // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  //   offset: 0,
                  //   color: this.color
                  // }, {
                  //   offset: 1,
                  //   color: '#ffe'
                  // }])
                }
              },
              data:this.seriesDataArr    //資料
            },
            {
              type:'bar',
              smooth: this.smooth,
              itemStyle: {
                normal: {
                  color: 'transparent'
                }
              },
              data:this.mokeArr || []
            },
          ]
        })
        charts.on('mouseover', function (params) {
          that.$emit('changeTime',params)
        });
        event(window,'resize',()=>{charts.resize()})
      }
    },
    computed: {
      mokeArr () {
        let res = []
        this.seriesDataArr.forEach(v => {
          res.push(v-0+1)
        })
        return res
      }
    },
    watch: {
      seriesDataArr () {
        this.initEcharts()
      }
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus" scoped>
.charts {
  width: 100%
}
</style>
 

這個折線圖元件，例項效果如如下：

心得體會如下：

 1、 title 用一個數組接收，可以接收多個數組，圖形擴充套件性更強

 2、 yAxis、xAxis可以交換位置

 3、  為了美觀，一般yAxis、xAxis中部分或者全部，有一定預設樣式更好

    yAxis : [
            {
              type : 'value',
              axisTick:{
                show:false   //  是否顯示座標軸刻度
              },
              axisLine: {show: false}, // 是否顯示座標軸軸線
              splitLine: {
                show: true,   // 是否顯示分隔線(網格線)
                lineStyle:{
                  color: '#eee',  // 分隔線(網格線)顏色
                  width: 0.5      // 分隔線(網格線)寬度
                }
              },
              axisLabel: {
                show: true,   //  是否顯示刻度值，X,Y軸值
                textStyle: {
                  color: '#888',
                  fontSize: 11
                }
              },
            }
          ],
 

 4、 echarts中的點選事件，如果在餅狀圖，或者柱狀圖中做點選事件的話，很簡單，直接新增即可。但是折線圖中，做點選事件，只能點選那個小圓圈，才可以觸發，這樣，使用者體驗及其不好。

   解決措施： 新增加一個 柱狀圖，柱狀圖顏色為 transparent， 資料為 折線圖的最大值組成的一個數組， 通過觸發柱狀圖來達到觸發折線圖的效果，  還有就是用onmouseover，代替onclick事件， 然而onmouseover的話，避免不了多次觸發，因此也需要一定的優化，優化如下：

charts.on('mouseover', function (params) {    
    let time = null
    clearSetTimeout(time)
    time = setTimeout(() => {
        that.$emit('changeTime',params)
    },200)    
 });