效果展示
核心代码
<template>
<div id="cpu" style="width: 270px;height: 200px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "show",
methods:{
aucDrawLine() {
// 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
// 这里'auc'是自己取的名字，跟div标签属性的id后面的值是一一对应的
let myChart = echarts.init(document.getElementById('cpu'));
// 绘制图表
myChart.setOption( {
title: {
text: 'CPU使用率', // 标题名
// 标题的样式
textStyle: {
color: '#888', // 字体颜色
fontFamily: 'Microsoft YaHei', // 字体
fontSize: 20,
fontWeight: '400',
align: 'center', // 文字的水平方式
},
left: 'center', // 定位
top: '5%'
},
series: [{
type: 'liquidFill',
radius: '60%',
waveAnimation: true,
data: [{
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: '#7DCEA0'
}
}
},
{
value: 0.45,
direction: 'right',
itemStyle: {
normal: {
color: '#52BE80 '
}
}
},
],
outline: {
show: true,
borderDistance: 5, // 边框线与图表的距离 数字
itemStyle: {
opacity: 0.9, // 边框的透明度 默认为 1
borderWidth: 2, // 边框的宽度
shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: "#fff", // 边框的阴影颜色,
borderColor:'#3AA66E' // 边框颜色
}
},
itemStyle: {
opacity: 0.9, // 波浪的透明度
shadowBlur: 0 // 波浪的阴影范围
},
backgroundStyle: {
color: '#fff' // 图表的背景颜色
},
label: {
// 数据展示样式
show: true,
color: '#888',
insideColor: '#fff',
fontSize: 24,
fontWeight: 400,
},
}]
})
},
},
mounted() {
this.aucDrawLine();
},
}
</script>