Echarts 5 - 瞎入门指南-11

1. 水球图

这样一个动效配置却极其简单， eharts5还是很让人惊喜的

import * as echarts from 'echarts'
import 'echarts-liquidfill'
复制代码

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.5],
        }
    ]
}
复制代码

你没看错就这点代码，就出来了， 接下来添油加醋下

1. 首先来个大波浪

代码如下

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.5, 0.4, 0.3], //需要几层浪就填几个数据，其中图上的百分比取数据里的最大值==这里的50%
        }
    ]
}
复制代码

2. 更改波浪颜色

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.5, {
                value: 0.4,
                itemStyle: {
                    color: 'red',
                    opacity: 0.8
                },
                //设置鼠标悬浮时的高亮样式
                emphasis: {
                    itemStyle: {
                        opacity: 0
                    }
                }
            }, 0.3],
        }
    ]
}
复制代码

3. 停一下，不浪了

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.3],
            waveAnimation: false  //累了， 躺平了, 不动了
        }
    ]
}
复制代码

4. 暴风雨来临时，水面异常平静

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.3],
            waveAnimation: false, 
            amplitude: 0  //振幅 - 值越大浪越大
        }
    ]
}
复制代码

5. 逆流而上

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.3],
            direction: 'left',   //改变水流方向
        }
    ]
}
复制代码

6. 对冲模型 --> 大路朝天，各走一边

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [
                { value: 0.6, direction: 'right'},  
                { value: 0.4, direction: 'left'}
            ]
        }
    ]
}
复制代码

7. 换容器

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.5],
            shape: 'diamond'  
        }
    ]
}
复制代码

自定义个可爱的小尾巴

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.6, 0.5, 0.4, 0.3],
            shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
        }
    ]
}
复制代码

8. 发大水，小容器装不下了，换大箱子

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.6],
            shape: 'container'
        }
    ]
}
复制代码

8. 设置文字

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.5],
            label: {
                show: true,  //false: 隐藏百分比
                color: '#294D99',
                fontSize: 50,
                position: 'outside',  //容器外展示
                ...
            },
        }
    ]
}
复制代码

这里水很深

const options = {
    series: [
        {
            type: 'liquidFill',
            data: [0.4],
            shape: 'container',
            itemStyle: {
                color: '#008800',
                opacity: 0.8
            },
            label: {
                formatter: function() {
                    return '水深，禁止下河游泳！！'
                }
            }
        }
    ]
}
复制代码

借花献佛

最近看到这个echarts效果很漂亮， 献给各位gym

最后的轻语

                             
            `今天教师节，这里我不夸老师，
             如今太多收礼的，上课不好好教，下课搞培训，连作业还要家长改。。 
             还看别人， 说的就是你，xx老师 ······
             2021-9-10
             `  
复制代码