自主封装Echarts水球图

最新推荐文章于 2024-05-30 09:55:08 发布

Mi Manchi-Jiang

最新推荐文章于 2024-05-30 09:55:08 发布

阅读量166

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_62883848/article/details/130314642

版权

项目中需要用到动态波纹的水球图，在网站上没找到合适的，于是自己封装了一个，需要的自取。

var path ='path://M82.6,85.5c0-1.1,0.4-2.1,1.4-2.9s2-1.3,3.1-1.3l19.5,0c1.1,0,2,0.4,2.9,1.3c0.9,0.9,1.3,1.8,1.3,2.9l0.1,54.1c0,1-0.4,1.9-1.3,2.8c-0.9,0.9-1.8,1.3-2.9,1.3l-19.5,0c-1.1,0-2.2-0.4-3.1-1.3c-0.9-0.9-1.4-1.7-1.4-2.8L82.6,85.5z M91.5,80.5z';
option = {
    backgroundColor:"rgba(0, 0, 0,)",
     grid: { y:0,x:0,x2:-100,y2:-100},
    series: [
        {
        type: 'liquidFill',
        // center: center,
        data:[0.42,0.4],
        radius: '45%',
        waveLength: '99%',
        waveHeight: '10',
        amplitude: 10,
        outline: {show: false},
        backgroundStyle: {
 
              color: {
                  type:'radial',
                    x: 0.5, 
                    y: 0.5,
                    r: 1.1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(105, 158, 230, 0.1)',
                        },
                        {
                            offset: 0.75,
                            color: 'rgba(105, 158, 230, 0.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(105, 158, 230, 0.25)',
                        },
                    ],
                    globalCoord: false,
                },
            borderColor: 'rgba(105, 158, 230, 0.25)',
            borderWidth: 1,
        },
        shape: path,
       color: ['rgba(255, 255, 255, 0.2)',
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ["rgba(249, 250, 251, 1)"], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ["rgba(134, 160, 196, 1)"], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            ],
        label: {normal: {formatter:'',}}
     }
    ],
};

效果展示：