1. Water polo figure

Such a dynamic configuration is extremely simple, eHARTS5 is still very surprising

import * as echarts from 'echarts'
import 'echarts-liquidfill'
Copy the code
const options = {
    series: [{type: 'liquidFill'.data: [0.5]],}}Copy the code

You read it right that’s it, that’s it. Now add some more

1. Start with a big wave

The following code

const options = {
    series: [{type: 'liquidFill'.data: [0.5.0.4.0.3].// Fill in some data, where the percentage on the graph is the maximum value in the data == 50% here}}]Copy the code
2. Change the wave color

const options = {
    series: [{type: 'liquidFill'.data: [0.5, {
                value: 0.4.itemStyle: {
                    color: 'red'.opacity: 0.8
                },
                // Set the highlighting style for mouse hover
                emphasis: {
                    itemStyle: {
                        opacity: 0}}},0.3]],}}Copy the code
3. Stop for a minute, the waves are still

const options = {
    series: [{type: 'liquidFill'.data: [0.3].waveAnimation: false  // Tired, lie flat, do not move}}]Copy the code
During the storm, the water was unusually calm

const options = {
    series: [{type: 'liquidFill'.data: [0.3].waveAnimation: false.amplitude: 0  // The larger the amplitude, the larger the wave}}]Copy the code
5. Swim upstream

const options = {
    series: [{type: 'liquidFill'.data: [0.3].direction: 'left'.// Change the direction of the flow}}]Copy the code
6. Hedge model –> The road is in the air, go on one side

const options = {
    series: [{type: 'liquidFill'.data: [{value: 0.6.direction: 'right'},  
                { value: 0.4.direction: 'left'}]}]}Copy the code
7. In the container

const options = {
    series: [{type: 'liquidFill'.data: [0.5].shape: 'diamond'}}]Copy the code
Customize a cute little tail

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

const options = {
    series: [{type: 'liquidFill'.data: [0.6].shape: 'container'}}]Copy the code
8. Set the text

const options = {
    series: [{type: 'liquidFill'.data: [0.5].label: {
                show: true.//false: hides the percentage
                color: '#294D99'.fontSize: 50.position: 'outside'.// Display outside the container. }}]}Copy the code
The water is deep here.

const options = {
    series: [{type: 'liquidFill'.data: [0.4].shape: 'container'.itemStyle: {
                color: '# 008800'.opacity: 0.8
            },
            label: {
                formatter: function() {
                    return 'Deep water, no swimming in the river!! '}}}]}Copy the code
We are

Recently I saw this echarts effect is very beautiful, for everyone gym

The last whisper
                             
            'Today teacher's day, here I don't kua teacher, now too many gifts, class don't teach, do training after class, even homework parents to change. Look at others, said is you, xx teacher... 2021-9-10  
Copy the code