react中实现echarts-liquidfill水滴球效果
需积分: 0 32 浏览量
2024-02-22
17:30:29
上传
评论
收藏 17KB DOCX 举报
npm 案例：
https://www.npmjs.com/package/echarts-liquidfill?activeTab=readme
导入文件
import { useRef } from 'react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
//series 配置
const series = [
{
type: 'liquidFill', // 水球图
radius: '90%', // 水球图半径
top: 20,
itemStyle: {
opacity: 1, // 水球图透明度
},
backgroundStyle: {
color: '#213153', //水球图内部背景色
opacity: 0.1,
},
data: [
{
name: 'score', // 水球图数据名称
direction: 'right', // 水球图数据方向
value: .3, // 水球图数据值
资源评论
