funnel.vue

<template>
    <div :id="idstr"></div>
</template>

<script>
export default {
  data () {
    return {
      dataObj: {},
      option: {},
      chart: null,
      clickNum: [1, 1, 1, 1, 1]
    }
  },
  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', '#E23AA2', '#F5A623', '#D6FFBA'],
        tooltip: {
          transitionDuration: 0,
          trigger: 'item',
          formatter: '{b} : {c}' // a对应系列名称,b对应数据项名称,c对应数据项值
        },
        legend: {
          textStyle: {
            color: '#fff' // 图例文字颜色
          },
          orient: 'vertical',
          left: 20,
          bottom: 10,
          data: vm.message.legend
        },

        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '30%',
            top: 40,
            bottom: 20,
            width: '80%',
            minSize: '10%',
            maxSize: '70%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}', // 展示数值
              borderRadius: ['30', '30', '30', '30']
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            data: vm.message.data
          }
        ]
      }
      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      const vm = this
      vm.chart.setOption(vm.option)
    }
  },
  watch: {
    message: {
      handler () {
        const vm = this
        setTimeout(function () {
          vm.drawLine()
        }, 0)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>