实现一个Vue页面多次复用一个echarts组件的数据传递（setup语法糖写法)

目录

效果展示

问题描述

解决方案

效果展示

问题描述

由于想要实现组件的复用的功能，从而产生了两个问题，第一个是数据的传递，第二个是id的传递

最终发现实际上是同一个问题哈哈

注：id的传递的传递是为了防止由于id相同导致第二个echarts图覆盖第一个echarts图

解决方案：

实现效果的代码如下：

父组件：

<template>
  <div>
    <chart style="width:100%;height:50%" id="mian1" :Data="DataList1"></chart>
    <chart style="width:100%;height:50%" id="main2" :Data="DataList2"></chart>
  </div>
</template>

<script setup>
import chart from '@/category/chart.vue';
import { reactive } from 'vue'

const DataList1 = reactive([
  { value: 40, name: 'rose 1' },
  { value: 38, name: 'rose 2' },
  { value: 32, name: 'rose 3' },
  { value: 30, name: 'rose 4' },
  { value: 28, name: 'rose 5' },
  { value: 26, name: 'rose 6' },
  { value: 22, name: 'rose 7' },
  { value: 18, name: 'rose 8' }
]);

const DataList2 = reactive([
  { value: 400, name: 'rose 1' },
  { value: 380, name: 'rose 2' },
  { value: 320, name: 'rose 3' },
  { value: 300, name: 'rose 4' },
  { value: 280, name: 'rose 5' },
  { value: 260, name: 'rose 6' },
  { value: 2200, name: 'rose 7' },
  { value: 180, name: 'rose 8' }
]);


</script>
<style scoped></style>

子组件：

<template>
  <div>
    <e-charts :id=id  class="chart" :option="option" />
  </div>
</template>
  
<script setup>
import { VueElement, onMounted, toRefs} from "vue";
import * as echarts from 'echarts';
const props = defineProps({
  id:{
     type:String,
    default: "我是默认值"
      },
  Data: Array

})
console.log(props.Data);
console.log(props.id)

onMounted(() => {
   var id = props.id
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
 
  var option;
  option = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: props.Data

      }
    ]
  };
  option && myChart.setOption(option);
});
</script>
  
<style scoped>
.chart {
  width: 500px;
  height: 500px;
}
</style>
  

还是那句话，能看懂代码的伙伴，直接把代码拿走修改即可，稍有疑问的伙伴，就来听我解释一下吧。

首先说一下，传递数据

我先要把数据赋值给一个实例，

const DataList1 = reactive([
  { value: 40, name: 'rose 1' },
  { value: 38, name: 'rose 2' },
  { value: 32, name: 'rose 3' },
  { value: 30, name: 'rose 4' },
  { value: 28, name: 'rose 5' },
  { value: 26, name: 'rose 6' },
  { value: 22, name: 'rose 7' },
  { value: 18, name: 'rose 8' }
]);

 然后通过动态数据绑定，以及绑定一个id，传递给子组件

 <chart style="width:100%;height:50%" id="mian1" :Data="DataList1"></chart>

接着 ，通过defineprops接收传递过来的数据和id，并且创建一个实例

const props = defineProps({
  id:{
     type:String,
    default: "我是默认值"
      },
  Data: Array

})

 最后，将props接收到的值给对应的属性

        data: props.Data

   var id = props.id
  var chartDom = document.getElementById(id);

这样就可以实现组件的复用啦

觉得不错的小伙伴们，请点赞点赞点赞，收藏收藏收藏