echart+vue

pie+click.vue

<template>
  <el-card class="box-card custom-box">
    <div slot="header" class="clearfix">
      <div class="card-header">
        <span class="card-title">{{ title }}</span>
      </div>
    </div>
    <div ref="chart" class="chart"></div>
  </el-card>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    title: String,
    source: Array
  },
  data: () => ({
    chart: null,
    legendData: [],
    seriesData: []
  }),
  watch: {
    source () {
      this.udtData()
    }
  },
  mounted () {
    this.udtChart()
    // 窗口变化监听
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    // 窗口变化移除
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    resize () {
      if (this.chart) { this.chart.resize() }
    },
    async udtData () {
      const data = this.source
      this.legendData = data.map(i => i.desc)
      this.seriesData = data.map(i => ({
        name: i.desc,
        value: i.num
      }))
      this.udtChart()
    },
    udtChart () {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.clear()
      this.chart.setOption({})
      this.chart.setOption({
        title: {
          show: this.seriesData.length === 0,
          subtext: '暂无数据',
          subtextStyle: {
            color: '#bbb',
            fontWeight: 350,
            fontSize: 18
          },
          left: '36%',
          top: '36%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: 20,
          bottom: 20,
          data: this.legendData
        },
        series: [
          {
            name: '数据1',
            type: 'pie',
            radius: '55%',
            center: ['70%', '50%'],
            data: this.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }, true)
      // 点击时间添加
      this.chart.off('click')
      this.chart.on('click', (params) => {
        this.$emit('toView', params.name)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.box-card {
  height: 100%;
}
.chart {
  height: 100%;
  min-height: 150px;
}
.card-header {
  overflow: hidden;
  span {
    float: left;
  }
  i {
    float: right;
    font-style: normal;
    font-size: 14px;
    color: rgba(51, 51, 51, 0.85);
  }
}
</style>
<style lang="less">
.custom-box {
  .el-card__body {
    height: calc(100% - 58px);
  }
}
</style>