echarts-liquidfill水滴球效果

本文主要是介绍echarts-liquidfill水滴球效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

npm案例：
https://www.npmjs.com/package/echarts-liquidfill?activeTab=readme

echarts-liquidfill水滴球效果

import { useRef } from 'react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const chartRef = useRef<any>();
const chartInstance = useRef<any>();const initChart = () => {chartInstance.current = echarts.init(chartRef.current);chartInstance.current.setOption({series})
}
useEffect(() => {initChart();
}, []);

<div ref={chartRef} style={{ height: '100%' }} />

html引入方式

//https://echarts.apache.org/zh/builder.html
<script type="text/javascript" src="./echarts.min.js"></script>//https://github.com/ecomfe/echarts-liquidfill
<script type="text/javascript" src="./echarts-liquidfill.min.js"></script>

<div id="LiquidfillChart" style="height: 100%" />

<script type="text/javascript">const chartDom = document.getElementById('LiquidfillChart');const myChart = echarts.init(chartDom);const option = {series};option && myChart.setOption(option);</script>

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, // 水球图数据值itemStyle: {// 水球图数据样式opacity: 1, // 水球图数据透明度normal: {// 水球图数据正常样式color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#2876F7', // 0% 处的颜色},{offset: 1,color: '#35EBFB', // 100% 处的颜色},],global: false, // 缺省为 false}, // 水球图数据正常样式颜色},},},],label: {// 设置百分比展示color: '#24FDFC', // 百分比颜色normal: {// 百分比正常样式textStyle: {// 百分比正常样式字体fontSize: 20, // 百分比正常样式字体大小color: '#A4DAFF',},formatter: function (param) {// 百分比正常样式字体格式return param.value * 100 + '%'; // 百分比正常样式字体格式},},},//外部细圆outline: {// 是否显示外圈show: true,borderDistance: 0, // 外部圆线距离水球的距离itemStyle: {// 外部圆线样式borderWidth: 1, // 外部圆线宽度borderColor: '#67abef',},},},],