效果图:
HTML:
<div class="chart-dis-area" style="display: flex; background-color:#0B1837 ;">
<div v-for="(item,index) in chartList" class="chart-item-area" style="width: 20%;">
<div class="echartsList" :id="item.id" style="height: 225px;"></div>
</div>
</div>
JS:
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图等组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/gauge')
// 引入提示框和title等组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/graphic')
//引入水球图组件
import echartsLiquidfill from 'echarts-liquidfill'
export default {
data() {
return {
chartList: [], //
HardDisklength: 0 //获取硬盘数组的数量
}
},
mounted() {
this.init();
},
methods: {
init() { //生成对应数量的硬盘echarts图
var data = [{"a": 68,"b": "C", {"a": 12,"b": "D"}, {"a": 5,"b": "E"}, {"a": 20,"b": "F"}]
var alist = [];
var blist = [];
let arr = [];
this.HardDisklength = data.length;for (let i = 0; i < this.HardDisklength; i++) {
let item = {
barChart: '', // chart 对象实例
id: 'id' + i, // 为了标示 id 不同
}
arr.push(item);
alist.push(data[i].a);
blist.push(data[i].b);
}
console.log(arr);
this.chartList = arr;
this.$nextTick(() => {
for (let i = 0; i < this.chartList.length; i++) {
this.chartList[i].barChart = echarts.init(document.getElementById(this.chartList[i].id));
window.onresize = this.chartList[i].barChart.resize;
this.chartList[i].barChart.setOption(this.HardDiskOption(alist[i], blist[i])); //设置option
}
})
},
//已使用率 盘符
HardDiskOption(a, b) {
return {
backgroundColor: "#0B1837",
title: {
text: a + '%',
subtext: b + '盘',
subtextStyle: {
fontSize: '15'
},
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: '#0580f2',
fontSize: '30'
}
},
color: ['rgba(176, 212, 251, 1)'],
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: a,
name: '01',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#00cefc' // 0% 处的颜色
}, {
offset: 1,
color: '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '02',
value: 100-a
}]
}]
}
},
}
}