1.饼图
let pmTypeData = [
{value: 0, name: 'a', data: data},
{value: 1, name: 'b', data: data},
{value: 2, name: 'c', data: data},
]
option = {
tooltip: {
trigger: 'item',
formatter: '{b} ({c}) {d}%'
},
color:[
'#7FB1FC','#FFDF8E','#F3A4A4','#8194F9','#F9B673',
'#E77051','#F9DB76','#F08B8B','#D176F9','#AAD28E',
'#F4B282','#FFCD72','#FBB17A','#A0D5C3','#83A4DD',
'#5583C8','#95C474','#E49378','#B5838D','#E5999C',
'#5FC0B4','#A8DADC','#457B9D','#7FB1FF','#B07D62',
'#42B3A6','#D1AF79','#64D3C7','#0097C8','#48CAE4'
],
legend:{
orient: 'vertical',
itemHeight: 6,
icon:'circle',
type: 'scroll',
align: 'auto',
left: '65%',
top: 'center',
data: legendData,
// selectedMode: true,
formatter:(name)=>{
var data = pmTypeData
var tarValue = data.find(item=>item.name === name).value
return '{a|'+name+'}'+'{b|'+ tarValue +'个}'
},
textStyle:{
rich:{
a:{
width:80,
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#888888'
},
b:{
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#353535',
}
}
}
},
series: [
{
name: 'vpc',
type: 'pie',
radius:['52%', '70%'],
center: ['40%', '50%'],
circlePoition:'center',
width:183,
height:183,
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: `{a|${0}个}\n{b|可优化总数}`,
textStyle: {
rich: {
a:{
fontSize:16,
fontFamily:'PingFangSC-Semibold,PingFang SC',
fontWeight:600,
color:'#000000',
},
c: {
fontSize:16,
fontFamily:'PingFangSC-Semibold,PingFang SC',
fontWeight:600,
color:'#000000',
},
b:{
height:20,
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#818181',
lineHeight:20
},
}
}
}
},
data: pmTypeData
}
]
}
// 点击饼图事件
this.echarts_disk.on('click',(params) => {})
// 图例改变事件（与中间总数数据或其他数据联动）
myChart.on('legendselectchanged', function(params) {
var option_reset = this.getOption();
let select_value = Object.values(params.selected);
let total_reset = 0; // 重置合计
if (select_value && select_value.length) {
for (var index = 0; index < select_value.length; index++) {
if (select_value[index] !== false) {
total_reset += option_reset.series[0].data[index].value
}
}
}
//修改合计值为修改后的值
option_reset.series[0].label.formatter = `{a|${total_reset}个}\n{b|可优化总数}`
this.setOption(option_reset);
});
2.y轴柱状图
option = option = {
color: ['#f9b673', '#5bd0c4', '#8194f9', '#7A3BF2', '#4FACBD', '#7887D9', '#E592E8'],
legend: {
top: '0',
itemHeight: 6,
icon:'circle',
x: 'center',
data: ['优化前月费用', '优化后月费用']
},
tooltip: {
show: true
},
grid: {
left: '10%',
right: '10%',
top: '20%',
bottom: '20%',
containLabel: true
},
yAxis: [{
type: 'category',
}],
xAxis: {
type: 'value',
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
show: false
},
},
series:[
{
name: '优化前月费用',
type: 'bar',
barWidth: '20',
label: {
show: true,
formatter: '￥{c}'
},
data: [{
value: data.before
}]
},
{
name: '优化后月费用',
type: 'bar',
barWidth: '20',
label: {
show: true,
formatter: '￥{c}'
},
data: [{
value: data.after
}]
}
]
}
3.双环图
Snipaste_2021-06-09_15-49-21.png
let vpcData = [
{value: data1, name: 'vCPU分配率', itemStyle: { normal:{color:'#7fb1fc'}, emphasis:{color:'#7fb1fc'} }},
{value: data-data1, name: 'vCPU分配率剩余', itemStyle: { normal:{color:'#ececec'}, emphasis:{color:'#ececec'} }}
]
let totalCount_vpc = parseInt(data.vcpus_used/data.vcpus_total*100)
let totalCount_subnet = parseInt(data.memory_used/data.memory_total*100)
let subnetData = [
{value: data1, name: '内存分配率', itemStyle: { normal:{color:'#5bd0c4'}, emphasis:{color:'#5bd0c4'} }},
{value: data- data1, name: '内存分配率剩余', itemStyle: { normal:{color:'#ececec'}, emphasis:{color:'#ececec'} }}
]
let legendData = ['vCPU分配率', '内存分配率']
let echarts_vcpu = echarts.init(document.getElementById('echarts-vcpu'))
this.option = {
tooltip: {
trigger: 'item',
formatter: '{b} ({c}) {d}%'
},
legend:{
orient: 'horizontal',
selectedMode: false,
itemHeight: 6,
icon:'circle',
// type: 'scroll',
align: 'auto',
bottom: '30px',
data: legendData,
// selectedMode: true,
formatter:(name)=>{
return '{a|'+name+'}'
},
textStyle:{
rich:{
a:{
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#888888'
}
}
}
},
series: [
{
name: 'vcpu分配率',
type: 'pie',
color: [
'#7fb1fc', '#ececec'
],
radius:['42%', '50%'],
center: ['50%', '30%'],
circlePoition:'center',
width:183,
height:183,
avoidLabelOverlap: false, // 需要强制所有标签放在中心位置，可以将该值设为 false,默认true
hoverAnimation:false, // 去除饼图hover效果
emphasis: {
label: {
show: true
}
},
label: {
normal: {
show: false,
position: 'center',
formatter: `{a|${totalCount_vpc}%}\n{b|分配率}`,
textStyle: {
rich: {
a:{
fontSize:24,
fontFamily:'PingFangSC-Semibold,PingFang SC',
fontWeight:600,
color:'#000000',
},
b:{
height:20,
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#818181',
lineHeight:20
},
}
}
}
},
data: vpcData
},
{
name: '内存分配率',
type: 'pie',
color: [
'#5bd0c4', '#ececec'
],
radius:['27%', '35%'],
center: ['50%', '30%'],
circlePoition:'center',
width:183,
height:183,
emphasis: {
label: {
show: true
}
},
avoidLabelOverlap: false,
hoverAnimation:false,
label: {
normal: {
show: false,
position: 'center',
formatter: `{a|${totalCount_subnet}%}\n{b|分配率}`,
textStyle: {
rich: {
a:{
fontSize:24,
fontFamily:'PingFangSC-Semibold,PingFang SC',
fontWeight:600,
color:'#000000',
},
b:{
height:20,
fontSize:12,
fontFamily:'PingFangSC-Regular,PingFang SC',
fontWeight:400,
color:'#818181',
lineHeight:20
},
}
}
}
},
data: subnetData
}
]
}
echarts_vcpu.setOption(this.card_config.private.vcpu.pmData.option)
window.addEventListener('resize', () => {
echarts_vcpu.resize()
})
echarts_vcpu.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: 0})
let index = 0
let seriesIndex = 0
// 重置中间显示值
echarts_vcpu.on('mouseover',function(e){
echarts_vcpu.dispatchAction({type: 'downplay',seriesIndex: seriesIndex,dataIndex:index})
echarts_vcpu.dispatchAction({type: 'highlight',seriesIndex: e.seriesIndex,dataIndex:e.dataIndex})
index = e.dataIndex
seriesIndex = e.seriesIndex
})
// //当鼠标离开时，把当前项置为选中
echarts_vcpu.on('mouseout',function(e){
index = e.dataIndex
seriesIndex = e.seriesIndex
echarts_vcpu.dispatchAction({type: 'highlight',seriesIndex: e.seriesIndex,dataIndex: e.dataIndex})
})
图型库：（https://www.makeapie.com/explore.html#sort=ranktimeframe=allauthor=all）
echarts库：（https://echarts.apache.org/examples/zh/index.html#chart-type-bar）
