echarts子组件解决列表渲染echarts图表问题

杨屹yu

已于 2024-04-18 11:45:27 修改

阅读量824

点赞数 31

文章标签： echarts 前端 javascript vue.js

于 2024-04-18 11:40:07 首次发布

本文链接：https://blog.csdn.net/2302_76432625/article/details/137914364

版权

本文详细描述了如何在Vue应用中，父组件通过props将数据传递给子组件，以实现子组件动态渲染echarts饼图。通过表格列展示图表实例，展示了组件间数据共享的常见实践。

摘要由CSDN通过智能技术生成

一、父组件向子组件传值

子组件代码：

<template>

<div>

<div :id="id" style="width: 160px; height: 160px;"></div>

</div>

</template>

<script setup>

import { ref, onMounted, onUnmounted, toRefs, defineProps } from 'vue';

import * as echarts from 'echarts';

const props = defineProps({

// 子组件接收父组件传递过来的值

info: Object,

});

// 使用父组件传递过来的值

const { info } = toRefs(props);

const id = ref(info.value.id);

let myChart = null;

onMounted(() => {

const chartDom = document.getElementById(id.value); // 使用 id.value 获取实际的 ID 字符串

myChart = echarts.init(chartDom);

const option = {

tooltip: {

trigger: 'item'

},

legend: {

orient: 'horizontal',

left: 'center'

},

series: [

{

label: {

show: false

},

type: 'pie',

radius: '70%',

data: [

{ value: info.value.visionSchedule.studentEndNumber,name:'已完成' },

{ value: info.value.visionSchedule.studentNumber - info.value.visionSchedule.studentEndNumber ,name:'未完成'},

],

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

},

]

};

myChart.setOption(option);

});

onUnmounted(() => {

if (myChart) {

myChart.dispose(); // 销毁图表实例

}

});

</script>

<style></style>

父组件向子组件传值的

时候，子组件是通过props来接收

父组件将数据传入子组件

<el-table-column prop="endTime" label="完成筛查人数" align="center">

<template #default="scope">

<scheduleson :info="scope.row" style="width: 100% ;height: 100%; display: flex;justify-content: center;"></scheduleson>

</template>

</el-table-column>

<script setup>

import scheduleson from './scheduleson.vue';

</script>

效果如图：

可以在列表中显示图表