ECharts之PieChart的封装使用

对应PieChart的参考地址

一、示例代码

1.1 引入echarts

// 在主文件中引入
import Echart from 'echarts';
Vue.prototype.$echarts = Echart;

1.2 组件

// PieChart.vue
<template>
  <div :id="name"
       style="height: 200px;width:500px">
  </div>
</template>

<style lang='less' scoped>
</style>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class PieChart extends Vue {
// 获取渲染data
  @Prop({
    type: Array,
    default: () => [],
  })
  checkData!: any[];

//获取动态id名
  @Prop({
    type: String,
  })
  name!: string;

  $echarts: any;

//初始化表格数据
  intCharts() {
    const chart: any = this.$echarts.init(document.getElementById(this.name));
    const options = {
      tooltip: {
        trigger: 'item',
        // 图例展示的格式
        formatter: '{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: '10%',
        // 自定义格式化函数
        formatter(name: any) {
          const data = options.series[0].data;
          let total = 0;
          for (let i = 0; i < data.length; i++) {
            total += data[i].value;
          }
          const val = data.filter((item) => {
            return item.name === name;
          });
          const v = val[0].value;
          const p = Math.round((v / total) * 100);
          return `${name}  ${v}人(${p}%)`;
        },
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '50%',
          data: this.checkData,
          center: ['60%', '50%'],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    chart.setOption(options);
  }

  mounted() {
    this.intCharts();
  }
}
</script>

1.3 组件使用

<template>
	<div class="mt-30"
         v-for="(item,index) in checkData"
         :key="item.id">
         <!--这里的key一定要为唯一标识项-->
      <div><span style="color:red">*</span>{{index+1}}、统计数据</div>
      <PieChart :checkData="item"
                :name="'item'+index" />
    </div>
</template>

<script lang='ts'>
	import {  Vue } from 'vue-property-decorator';
	import PieChart from '../components/PieChart.vue';
	export default class StatisticsAnalyze extends Vue {
		checkData = [
		    [
		      { value: 50, name: '搜索引擎',id:'36723471' },
		      { value: 5, name: '直接访问' ,id:'36723472'},
		      { value: 5, name: '邮件营销' ,id:'36723473'},
		      { value: 10, name: '联盟广告' ,id:'36723474'},
		      { value: 30, name: '视频广告' ,id:'36723475'},
		    ],
		    [
		      { value: 50, name: '很好' ,id:'36723476'},
		      { value: 5, name: '好' ,id:'36723477'},
		      { value: 5, name: '一般',id:'36723478' },
		      { value: 10, name: '差' ,id:'36723479'},
		      { value: 30, name: '非常差',id:'36723480' },
		    ],
	  ];
	  
	}
</script>

二、 遇到的问题及解决

2.1 渲染多个图表

要保证dom的id值不同，我这里是通过传递name来解决的

2.2 当打开不同问卷展示相同位置的图表时发现是上次的

这个真的坑到我了，原因最后发现是我v-for循环时，key值用index导致的，以前不以为然的东西，真的很重要。所有key一定要唯一标识项，不然不更新。