echarts水波球进度条

最新推荐文章于 2024-02-01 09:26:56 发布

Summer_Uncle

最新推荐文章于 2024-02-01 09:26:56 发布

阅读量533

点赞数 7

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Summer_Uncle/article/details/135539411

版权

本文介绍了如何在Echarts中使用第三方液态填充组件liquidFill，包括如何下载并安装npminstallecharts-liquidFill，以及如何在代码中配置和初始化这个组件来创建液态填充图形。

摘要由CSDN通过智能技术生成

1.效果图

在这里插入图片描述

2.使用

echarts里面没有这样的组件,需要参考echarts的第三方社区
社区地址:https://www.makeapie.cn/echarts_component/dataZoom_2.htm

下包

npm install echarts 
npm install echarts-liquidFill

引入

import echarts from 'echarts'
import 'echarts-liquidFill'

代码

<div id="myEcharts"></div>

initEcharts () {
      const myEcharts = echarts.init(document.querySelector('#myEcharts'))
      console.log(document.querySelector('#myEcharts'))

      const options = {
        backgroundColor: '#FFF', // 设置背景颜色
        series: [
          {
            type: 'liquidFill',
            data: [0.6],
            backgroundStyle: {
              borderWidth: 0
            },
            itemStyle: {
              color: '#25928c'
            },
            radius: '100%', // 设置水球半径，使用百分比
            shape: 'circle', // 设置水球形状为圆形
            outline: {
              show: false // 不显示外边框
            },
            label: {
              normal: {
                fontSize: 100 // 设置水球内文字字体大小为 40
              }
            }
          }
        ]
      }
      myEcharts.setOption(options)
    }