vue3之echarts水球异状图

最新推荐文章于 2024-08-21 13:27:17 发布

V。on

最新推荐文章于 2024-08-21 13:27:17 发布

阅读量429

点赞数 4

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_40864647/article/details/135937394

版权

echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中利用ECharts库创建一个动态的水球异状图，通过SVG路径定制形状，并展示了核心代码实现过程和配置参数。

摘要由CSDN通过智能技术生成

vue3之echarts水球异状图

效果：
在这里插入图片描述

核心代码：

<template>
    <div class="container">
        <div ref="chartContainer" class="chart"></div>
        <div class="info">
            <div class="percent">{{ percent }}%</div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const chartContainer = ref(null);
const percent = ref(0.85);
const color = {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
        {
            offset: 0,
            color: 'rgba(110, 238, 150, 0.4)', // 0% 处的颜色
        },
        {
            offset: 1,
            color: 'rgba(110, 238, 150, 0)', // 100% 处的颜色
        },
    ],
    global: false, // 缺省为 false
};

onMounted(() => {
    drawWaterball();
});

const drawWaterball = () => {
    const chart = echarts.init(chartContainer.value);

    const option = {
        series: [
            {
                type: 'liquidFill',
                radius: '96%',
                center: ['50%', '50%'],
                // 重点在这里，通过SVG 路径来实现
                shape: 'path://M245,233.8l-96.8,54.6c-11,6.2-24.6,6.1-35.5-0.3l-95.7-56.5c-10.9-6.4-17.6-18.2-17.4-30.9L0.7,89.5c0.1-12.7,7-24.3,18-30.5l96.8-54.6c11-6.2,24.6-6.1,35.5,0.3l95.7,56.5c10.9,6.4,17.6,18.2,17.4,30.9l-1.1,111.1C263,215.9,256.1,227.5,245,233.8z',
                data: [
                    {
                        value: percent.value,
                        itemStyle: {
                            normal: {
                                color,
                                borderWidth: 2,
                                borderColor: 'rgba(255, 233, 83, 0.4)',
                            },
                        },
                    },
                    {
                        value: percent.value,
                        itemStyle: {
                            normal: {
                                color,
                                borderWidth: 12,
                                borderColor: 'rgba(255, 233, 83, 0.2)',
                            },
                        },
                    },
                ], // data个数代表波浪数
                backgroundStyle: {
                    borderWidth: 0,
                    color: 'transparent',
                },
                label: {
                    normal: {
                        show: false,
                    },
                },
                outline: {
                    show: true,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: 'rgba(0,0,0,0)',
                    },
                    borderDistance: 0,
                },
            },
        ],
    };

    chart.setOption(option);
};
</script>

<style lang="scss" scoped>
.container {
    width: 293px;
    height: 320px;
    background: url('@/assets/img/bg.png') no-repeat 0 0;
    position: relative;

    .chart {
        width: 246px;
        height: 276px;
        position: absolute;
        left: 24px;
        top: 24px;
    }

    .info {
        width: 140px;
        font-family: 'flipper2017';
        color: rgba(255, 233, 83, 1);
        font-size: 43px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>