echarts使用，一次实例的心得

<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)    
 });