doubleYBarChart.vue

<template>
    <div class="wrapper">
      <div class="back text-right" @click="goBack" v-if="message.parentId">&lt; 返回</div>
      <div :id="idstr" class="h-100"></div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      recordList: [],
      option: {},
      chart: null
    }
  },
  props: ['message', 'idstr'],
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const vm = this
      // 基于准备好的dom，初始化echarts实例
      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        color: ['#30DDF4', '#D6FFBA', '#E23AA2', '#F5A623'],
        legend: {
          data: vm.message.legend,
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          transitionDuration: 0,
          trigger: 'item',
          formatter: '{a}:<br/>{b}: {c}'
        },
        grid: {
          top: '25%',
          left: '10%',
          right: '10%',
          bottom: '30%'
        },
        xAxis: [
          {
            type: 'category',
            data: vm.message.xAxis,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              rotate: 30
            },
            axisLine: {
              lineStyle: {
                color: '#FFF'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: vm.message.yAxis[0],
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,.3)'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#FFF'
              }
            }
          },
          {
            type: 'value',
            name: vm.message.yAxis[1],
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,.3)'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#FFF'
              }
            }
          }
        ],
        series: vm.message.data
      }
      console.log(vm.message)
      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      const vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    goBack () {
      if (this.recordList.length) {
        const popItem = this.recordList.pop()
        this.$emit('downData', popItem.parentId)
      }
    },
    eventList () {
      const vm = this
      vm.chart.off('click')
      vm.chart.on('click', function (params) {
        if (vm.message.isLeaf) return
        if (vm.message.parentId === undefined) return
        console.log(params.dataIndex)
        const _id = vm.message.idxs[params.dataIndex]
        vm.recordList.push({ name: params.name, id: _id, parentId: vm.message.parentId })
        console.log(vm.recordList)
        vm.$emit('downData', _id)
      })
    }
  },
  watch: {
    message: {
      handler () {
        const vm = this
        setTimeout(function () {
          vm.drawLine()
        }, 0)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
  position: relative;
  .back {
    position: absolute;
    top: 0;
    right: 0.24rem;
    color: #fff;
    font-size: .12rem;
    z-index: 1;
    cursor: pointer;
  }
}
</style>