echarts构建-echarts绘制动态水球

bendan520 echarts

2023-09-01 0 2,641 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

前言

在为一些需要储存液体的鞋厂开发基于物联网传感的监控平台时，往往需要对储液器的当前容量比例进行监控。以达到随时调整其储水量的目的。让我们来看看一些常见的水球项目。

有这样的：

这样的：

甚至还有这样的：

明天的文章将带领大家打造一张“从零到一”的水球地图。话不多说，让我们开始吧！

跑题了

说到数据可视化，你可能也知道或使用过一些知名的开源库，比如开源社区提供的D3.js、ApacheECharts等，都相当成熟和优秀。但由于ApacheECharts高度集成的API和一些已经完善的组件echarts构建，它比D3.js更容易使用和开发。所以我们这次将使用Echarts来开发水球组件。

查询组件库及其插件

当我们想要使用Apache Echarts的API库时echarts构建，我们可以先去其官网提供的一些示例进行选择。例如，如果您需要一些柱状图或折线图，您可以找到相关示例，但点击获取示例中的代码。如右图所示：

回到题外话。

我们想看看示例中是否有像水球这样的组件，但遗憾的是，我们在官网提供的示例中并没有找到。但经过不懈的努力，我们终于找到了开源社区提供的ApacheECharts相关插件echarts-liquidfill

引入依赖

源文件介绍：

Github源文件下载地址：导入相关依赖

复制

NPM介绍：

# install echarts as peer dependency
npm install echarts
npm install echarts-liquidfill

复制

创建选项 1. 背景颜色

首先，我们给背景赋予底色，这样就变得更加美观。

var option = {
    backgroundColor: '#050038',
    title: {},
    series: []
}

复制

功效图：

2.添加标题

var option = {
    backgroundColor: '#050038',
    title: {
        text: '神奇的水球',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
        }
    },
    series: []
}

复制

3.引入组件

现在我们将使用我们找到的ECharts插件来创建一个带有波浪的水球。

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) + '%',
                textStyle: {
                    fontSize: 50
                }
            }
        },
    }
    ]
}

复制

代码中使用的API说明：

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            itemStyle: {
                color: 'red' //第二个波浪将为红色
            }
        }, 0.4, 0.3]
    }]
};

复制

最终功效图

收藏 (0) 打赏

感谢您的支持，我会继续努力的!