pie.vue

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

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      dataObj: {},
      option: {},
      chart: null,
      clickNum: [1, 1, 1, 1, 1],
      type: [] // 后台给我的数据是type
    }
  },
  props: ['message', 'idstr'],
  // props: {
  //   message: {
  //     type: Array,
  //     default: () => {
  //       return []
  //     }
  //   },
  //   idstr: {
  //     type: String,
  //     default: ''
  //   }
  // },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      let vm = this
      // 基于准备好的dom，初始化echarts实例
      vm.chart = echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        tooltip: {
          transitionDuration: 0,
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA', '#9FFED7'],
        legend: {
          orient: 'horizontal',
          data: this.message[0].title,
          right: 20,
          bottom: 10,
          textStyle: {
            color: '#ffffff' // 图例文字颜色
          },
          icon: 'circle', // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 10, // 设置宽度
          itemHeight: 4, // 设置高度
          itemGap: 10 // 设置间距
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: { // hover效果，已经关闭
              label: {
                show: false,
                fontSize: '25',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.message[0].data
          }
        ]
      }
      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      let vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    eventList () {
      let vm = this
      vm.chart.on('click', function (params) {
      })
    }
  },
  watch: {
    message: function () {
      let vm = this
      setTimeout(function () {
        vm.drawLine()
      }, 1000)
      // console.log(this.message)
    }
  }
}
</script>

<style lang="less">

</style>