概述
<template>
<div id="app">
<div v-for="(item, index) in disk" :key="index">
<div class="main" style="width: 100%; height: 400px"></div>
{{item}}
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
disk: [
{
dirName: "C:/",
free: "73.8 GB",
idleRate: 49.23,
sysTypeName: "NTFS",
total: "150.0 GB",
typeName: "本地固定磁盘 (C:)",
usage: 50.77,
used: "76.2 GB",
},
{
dirName: "D:/",
free: "316.6 GB",
idleRate: 96.96,
sysTypeName: "NTFS",
total: "326.5 GB",
typeName: "本地固定磁盘 (D:)",
usage: 3.04,
used: "9.9 GB",
},
],
name: "小明",
age: "18",
};
},
mounted() {
var chartDom = document.getElementsByClassName("main");
for (var i = 0; i < this.disk.length; i++) {
var myChart = echarts.init(chartDom[i]);
var option;
option = {
title: {
text: this.disk[i].typeName,
subtext:this.disk[i].total,
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "硬盘",
type: "pie",
radius: "50%",
data: [
{ value: this.disk[i].free, name: "空闲" },
{ value:this.disk[i].used, name: "使用" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
option && myChart.setOption(option);
}
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
最后
以上就是自然犀牛为你收集整理的根据数组长度动态生成多个echarts饼状图的全部内容,希望文章能够帮你解决根据数组长度动态生成多个echarts饼状图所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复