react tsx EchartsLiquidfill 组件

最新推荐文章于 2024-05-29 17:37:51 发布

百脑神童

最新推荐文章于 2024-05-29 17:37:51 发布

阅读量161

点赞数 1

分类专栏： react typescript 文章标签： react.js

本文链接：https://blog.csdn.net/Zybdads/article/details/132586404

版权

react 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

typescript

1 篇文章 0 订阅

订阅专栏

1.安装

 "echarts": "^5.4.2",
 "echarts-liquidfill": "^3.1.0",

2.组件

import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const EchartsLiquidfill = (props: any) => {
   
    useEffect(() => {
        const value = 11.2
        let percent = 0.5;
       
       
        const chart = echarts.init(document.getElementById('liquidfill-chart')!);
        const font_Size = 14;//字体大小
        const option = {
            series: [{
                type: 'liquidFill',
                radius: '100%',
                with: '206px',
                data: [{
                    value: value,
                    direction: 'left',
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#238F7A' },
                                    { offset: 1, color: 'rgba(0, 0, 0, 1)' }
                                ],
                                globalCoord: false
                            },
                            borderColor: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#FFDC00' },
                                    { offset: 1, color: '#AA05C4' }
                                ],
                                globalCoord: false
                            },
                            borderWidth: 10 // 设置边框宽度
                        }
                    }
                }, {
                    value: percent,
                    direction: 'right',
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(255, 220, 0, 1)' },
                                    { offset: 1, color: 'rgba(170, 5, 196, 1)' }
                                ],
                                globalCoord: false
                            }
                        }
                    }
                }],
                backgroundStyle: {
                    type: 'rgba',
                    color: [0, 0, 0, 1]
                },
                center: ['50%', '50%'],
                label: {
                    show: true,
                    position: 'inside',
                    formatter: function (params: any) {
                        return params.value.toString();
                    },
                    fontSize: font_Size
                },
                outline: {
                    show: false
                }
            }],

        };
        chart.setOption(option);
        return () => {
            chart.dispose();
        };
    }, []);


    return <div id="liquidfill-chart" ></div>;
};

export default EchartsLiquidfill;

3页面

import EchartsLiquidfill from './hooks/useEchartsLiquidfill';


<EchartsLiquidfill ></EchartsLiquidfill>




css

#liquidfill-chart {
    width: 100%;
    height: 196px;
    overflow: visible;
    margin-bottom: 20px;
    z-index: 1;
}