<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const main = ref(); // 使用ref创建虚拟DOM引用,使用时用main.value
onMounted(() => {
init();
});
function init() {
// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(main.value);
const schoolData = [
{
name:'张三',
value:4253
},
{
name:'李四',
value:5691
},
{
name:'王五',
value:4536
},
{
name:'赵六',
value:4369
},
{
name:'周七',
value:5124
}]
// 指定图表的配置项和数据
const option = {
title: {
text: '个人存款',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '<br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{ value: 335, name: '' }]
}
]
};
// 赋值
option.series = [
{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
// data: res.data.map((v) => {
// return { name: v.name, value: v.value }
// })
data: schoolData,
}
]
// 赋值
// option.legend = [
// {
// data: schoolData.map((a) => a.name)
// }
// ]
// 赋值
option.legend.data = schoolData.map((a) => a.name)
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
<template>
<div ref="main" style="width: 100%; height: 400px"></div>
</template>
vue3 echars图表(饼状图)
最新推荐文章于 2024-09-06 17:39:42 发布