ECharts 注意点

yAxis轴的数据和 series中的 yAxisIndex: 坐标值相对性

vue 

https://www.npmjs.com/package/vue-echarts

解决销毁实例和内存泄露

beforeDestroy () {
this.$refs['chart'].clear()
this.$refs['chart'].dispose()
}

<template>
  <chart ref="chart"  :options="options" v-if="options" :auto-resize="autoResize" :watchShallow="watchShallow"></chart>
</template>

<script>
// 环比波动图表
export default {
  name: 'WaveRatio',
  props: ['mount', 'count', 'flag'], // 当flag为true，Y轴不加%号
  data () {
    return {
      autoResize: true,
      watchShallow: true
    }
  },
  computed: {
    options () {
      let labelTop = {
        normal: {
          position: 'top',
          rotate: 90,
          verticalAlign: 'middle',
          align: 'left',
          color: '#666'
        }
      }
      let labelBottom = {
        normal: {
          position: 'bottom',
          rotate: 90,
          verticalAlign: 'middle',
          align: 'right',
          color: '#666'
        }
      }
      let dataList = []
      let current = 0 // 记录数据
      for (let i = 0; i < this.count.length; i++) {
        this.count[i] * 1 >= 0 ? dataList.push({value: this.count[i], label: labelBottom}) : dataList.push({value: this.count[i], label: labelTop})
        if (this.count[i] * 1 >= 0) {
          current++
        } else {
          current--
        }
      }
      let count = this.count
      let noPercent = this.flag
      let dataZoomShow = this.mount.length > 30
      let dataZoom = null
      if (dataZoomShow) {
        dataZoom = [
          {
            type: 'slider',
            show: true,
            xAxisIndex: 0,
            filterMode: 'empty',
            width: '85%',
            height: 10,
            handleSize: 8,
            showDataShadow: false,
            left: '5%',
            bottom: '1%',
            start: 0,
            end: 45,
            fillerColor: 'rgba(0,0,0,.3)',
            showDetail: false
          }
        ]
      }
      let bottomValue = current === count.length
      let topValue = -current === count.length
      return {
        dataZoom: dataZoom,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,22,41,.7)',
          axisPointer: {
            type: 'line'
          },
          padding: [15, 20],
          formatter: function (params) {
            if (noPercent) {
              return params[0].name + '<span style="display:block;line-height:30px;">' + params[0].marker + params[0].seriesName + ': ' + params[0].value + '</span>'
            } else {
              return params[0].name + '<span style="display:block;line-height:30px;">' + params[0].marker + params[0].seriesName + ': ' + params[0].value + '% </span>'
            }
          }
        },
        grid: {
          bottom: bottomValue ? 90 : 40,
          left: 12,
          top: topValue ? 90 : 40,
          right: 0,
          containLabel: true
        },
        yAxis: {
          type: 'value',
          position: 'top',
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: noPercent ? '{value}' : '{value}%',
            color: '#666'
          }
        },
        xAxis: {
          type: 'category',
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: this.mount
        },
        series: [
          {
            name: noPercent ? '指数' : '环比',
            type: 'bar',
            barMaxWidth: 10,
            itemStyle: {
              color: '#79b6fd'
            },
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (Math.abs(current) === count.length) {
                    return params.name.length > 5 ? params.name.substring(0, 5) + '...' : params.name
                  } else {
                    return params.name
                  }
                }
              }
            },
            data: dataList
          }
        ]
      }
    }
  },
  beforeDestroy () {
    this.$refs['chart'].clear()
    this.$refs['chart'].dispose()
  }
}
</script>

<style scoped>
</style>