当前位置：首页 > article >正文

vue项目中——如何用echarts实现动态水球图

article 2024/9/20 11:46:27

有时候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: false
			                borderDistance: 0,
			                itemStyle: {
			                    borderWidth: 2,
			                    borderColor: '#112165',
			                },
			            },
        }

    ],
};