echarts 环图组件

最新推荐文章于 2024-05-17 13:52:13 发布

UpSeven0

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量32

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_34811855/article/details/134533490

版权

<template>
  <div class='tep' :ref="refName" :class="refName"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  props: ['refName', 'chartData'],
  components: {},
  data() {
    return {
      myChart: null,
    }
  },
  watch: {
    chartData: {
      handler: function (val) {
        this.dealData(val);
      },
      deep: true
    },
  },
  mounted() {
    var chartDom = this.$refs[this.refName];
    this.myChart = echarts.init(chartDom);
    this.chartData && this.dealData(this.chartData);
  },
  computed: {
  },
  methods: {
    dealData(val) {
      if (val.length > 0) {
        let seriesData = [];
        for (let i = 0; i < val.length; i++) {
          seriesData.push({
            name: 'aaaa' + i,
            value: 1
          });
        }
        this.initChart([], seriesData, []);
      } else {
        this.myChart.clear();
      }
    },
    initChart(dataX = [], seriesData = [], dataName = []) {
      var option = {
        color: ['#004faf', '#61a8ff', '#baf7d7', '#ffb876', '#ffe279', '#b3b4c5', '#004faf', '#61a8ff', '#baf7d7', '#ffb876', '#ffe279', '#b3b4c5'],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          icon: 'circle',
          textStyle: {
            color: "#666",
            fontSize: 12
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 28, // 每一个item之间的间距
          width: '400',
          top: 'center',
          left: '52%',
        },
        grid: {
          top: '10%',
          bottom: '2%',
          left: '2%',
          right: '2%'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['78%', '100%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              formatter(param) {
                return param.name + ' (' + param.percent + '%)';
              }
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false,
              length: 15,
              length2: 15,
            },
            data: seriesData
          }
        ]
      };
      this.myChart && this.myChart.clear();
      option && this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
}
</script>
<style lang='scss' scoped>
.tep {
  width: 100%;
  height: 100%;
}
</style>