preface

When developing a monitoring platform based on iot sensors for some plants that need to store liquids, it is often necessary to monitor the proportion of the current capacity of the reservoir. In order to achieve the purpose of adjusting its storage at any time. Let’s take a look at some common water polo events.

There’s this:

Like this:

There’s even this:

This article will take you through the construction of a water balloon from zero to one. Don’t say a word, get to work!

Get into the business

Speaking of data visualization, some of the most popular open source libraries you know or use, such as D3.js and Apache ECharts, are quite mature and excellent. And because of Apache ECharts’ highly integrated API and some already well-established components, it’s much easier to get started and develop than D3.js. So this time we will use Echarts to develop the water balloon component.

Query the component library and its plug-ins

When using the Apache Echarts API library, we can first go to the Apache Echarts websiteThe sampleTo make a choice. For example, if you need some bar charts or line charts, you can find the relevant example and click to get the code in the example. The diagram below:

Back to business.

We wanted to look for something like a water balloon in the sample, but unfortunately we didn’t find it in the sample provided on the official website. But after a lot of hard work, we finally found echarts-LiquidFill, a plug-in for Apache ECharts provided by the open source community

Introduction of depend on

Source file import:

  1. Github source file download address: github.com/apache/echa…
  2. Introducing dependent dependencies

<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>

Copy the code

NPM introduction:

# install echarts as peer dependency
npm install echarts
npm install echarts-liquidfill
Copy the code

Build Option

First, the background color

First we give the background a background color to make it look higher.

var option = {
    backgroundColor: '# 050038'.title: {},
    series: []}Copy the code

Effect:

Second, add a title

var option = {
    backgroundColor: '# 050038'.title: {
        text: 'Amazing Water Balloon'.textStyle: {
            fontWeight: 'normal'.fontSize: 25.color: 'rgb(97, 142, 205)'}},series: []}Copy the code

Introduce components

Now we’ll use the plugin we found for ECharts to build a water balloon with waves.

var option = {
    backgroundColor: '# 050038'.title: {
        text: 'ewfw'.textStyle: {
            fontWeight: 'normal'.fontSize: 25.color: 'rgb(97, 142, 205)'}},series: [{
        type: 'liquidFill'.radius: '45%'.center: ['50%'.'50%'].data: [0.5.0.5.0.5].backgroundStyle: {
            borderWidth: 1.color: 'RGB (255,0,255,0.1)'
        },
        label: {
            normal: {
                formatter: (0.5 * 100).toFixed(2) + The '%'.textStyle: {
                    fontSize: 50}}},}]}Copy the code

The API used in the code is explained:

  • Type: Apache Echarts uses this field to distinguish imported components. The plug-in component “liquidFill” used in this article must be imported in advance (see importing dependencies).

  • Radius: indicates the radius of the water sphere, which can be relative % or absolute px.

  • Center: the position of the water sphere. The first value is the X-axis and the second value is the Y-axis. It can be relative % or absolute px.

  • Data: The position of the waves inside the water sphere. It can be a numerical value (range 0-1) or more configurations for Object objects.

    Such as:

var option = {
    series: [{
        type: 'liquidFill'.data: [0.6, {
            value: 0.5.itemStyle: {
                color: 'red' // The second wave will be red}},0.4.0.3]]}};Copy the code
  • BackgroundStyle: Internal background color of water polo
  • Label: text inside a water balloon

Final rendering