有时候UI的脑洞真的很大，总是设计出一些稀奇古怪的图形，但又不得不佩服他们的审美，确实还挺好看的。今天给大家介绍echarts如何实现动态水球图。如图所示： 

 实现步骤

一、引入

在vue页面中引入echarts，如未安装需要先npm安装

html:

<template>
<div id="chart"></div>
</template>

js: 

import * as echarts from 'echarts'

二、初始化 

在mounted或者在其他方法中初始化echarts

 let chartDom = document.getElementById('chart')let myChart = echarts.init(chartDom)

三、配置option

以下是该水球图的option

const value = 0.45;
const data = [value];
let option = {backgroundColor: '#0F224C',title: [{text: 'CPU占用率',x: '22%',y: '70%',textStyle: {fontSize: 14,fontWeight: '100',color: '#5dc3ea',lineHeight: 16,textAlign: 'center',},}],series: [{type: 'liquidFill',radius: '47%',center: ['25%', '45%'],color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#446bf5',},{offset: 1,color: '#2ca3e2',},],globalCoord: false,},],data: [value, value], // data个数代表波浪数backgroundStyle: {borderWidth: 1,color: 'RGBA(51, 66, 127, 0.7)',},label: {normal: {textStyle: {fontSize: 50,color: '#fff',},},},outline: {// show: falseborderDistance: 0,itemStyle: {borderWidth: 2,borderColor: '#112165',},},}],
};

四、setOption 

 myChart.setOption(option)

 以上就是动态水球图的实现方法，如果需要多个水球图，即在option中加多个数据即可。希望这篇文章可以帮到你！