echarts图通用

1父组件调用

moment监控窗口

mounted() {
    const self = this
    window.onresize = () => {
      self.$refs.echart1.refresh()
      self.$refs.echart2.refresh(self.tagObjTagList)
      self.$refs.echart3.refresh()
      self.$refs.echart4.refresh()
      self.$refs.echart5.refresh()
    }
  },

div

<div class="public-content">
            <asset-category-pie ref="echart1"></asset-category-pie>
          </div>

子组件图

<template>
  <div id="assetCategoryPie"
       ref="assetCategoryPie"
       class="asset-category-pie"
       :style="{ width: chartWidth }">
  </div>
</template>

<script>
import echarts from 'echarts'
import centerImg from '@/assets/portalClient/asset/overview/yuan.png'
import { assetsTypeRank } from '@/api/pts/asset/tAssetView'
export default {
  name: 'ProdChart',
  props: {
    chartData: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    chartData: {
      handler: function (val, oldVal) {
        this.init(val)
      },
      deep: true
    }
  },
  data() {
    return {
      chartWidth: '100%',
      assetCategoryPieData: []
    }
  },
  created() {
    this.assetCategoryPieData = []
    assetsTypeRank('6').then(res => {
      if (res.code === 0) {
        res.data.forEach(obj => {
          if (obj.assetCategoryName === '更多') {
            this.assetCategoryPieData.push({ name: '其他', value: obj.assetsTotal })
          } else {
            this.assetCategoryPieData.push({ name: obj.assetCategoryName, value: obj.assetsTotal })
          }
        })
        this.init()
      }
    }).catch(error => {
      console.log(error)
    })
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('assetCategoryPie'))
  },
  methods: {
    refresh() {
      this.myChart.dispose()
      this.myChart = echarts.init(document.getElementById('assetCategoryPie'))
      this.init()
    },
    init() {
      const self = this
      var trafficWay = [
        {
          name: '暂无数据',
          value: 100
        }
      ]
      if (self.assetCategoryPieData.length > 0) {
        trafficWay = self.assetCategoryPieData
      }
      var data = []
      let count = 0
      trafficWay.forEach(obj => {
        count += obj.value
      })
      var color = ['#40E0D0', '#f8bd45', '#00d566', '#00b0ff', '#7330e4', '#FFD700', '#40E0D0', '#f8bd45', '#00d566']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 15,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        },
          {
            value: count * 0.02,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      const normalColor = '#78bdff'
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [57, 62],
        hoverAnimation: false,
        // center: ['50%', '58%'],
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: function (params) {
                var percent = 0
                var total = 0
                for (var i = 0; i < trafficWay.length; i++) {
                  total += trafficWay[i].value
                }
                percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '\n' + percent + '%'
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              length: 8,
              length2: 30,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      const option = {
        backgroundColor: 'transparent',
        color: color,
        title: {
          text: '数据\n占比',
          top: 'center',
          textAlign: 'center',
          left: '48%',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: centerImg,
              width: 80,
              height: 80
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(20, 26, 57, 0.8)',
          formatter: function (params) {
            const pd = params.name
            if (!pd) {
              return ''
            }
            const str = '<div style="padding:4px;color:#ffffff;font-size:16px;">' +
              '资产类型： <span style="color:' + params.color + '">' + params.name + '</span><br/>' +
              '资产数量： <span style="color:' + params.color + '">' + params.value + '</span> 个<br/></div>'
            return str
          }
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      self.renderChart(option)
    },
    renderChart(option) {
      // 绘制图表
      this.myChart.setOption(option)
    }
  }
}
</script>
<style lang="less">
.asset-category-pie {
  width: 100%;
  height: 108%;
}
</style>