水球图
上面是水球图的插件地址,水球图是echarts的一个插件,实现后效果如下,
水球图是和echarts版本有搭配的,目前是3.0.6,但是这个需要echarts5版本,而目前我用的是echarts4.0.X版本,所以需要用水球图的2.X版本。
所以安装的时候就需要指定版本, cnpm i echarts-liquidfill@2.0.6
参数没啥可说的,更多参数官网和其他博客都有,
var option = {
series: [{
type: 'liquidFill',
data: [ths.datas[i]],
radius: '100%',//圆半径
outline: {//外边框
show: false
},
color:['#fff'],//波浪的颜色
backgroundStyle: {
color: i%2==0? '#A9A1FF':'#6E41BE'
},
label: {
show: true,
color: '#fff',//字体颜色
insideColor: '#000',//被水淹没了颜色
fontSize: 20,//字号
// fontWeight: 'bold',
align: 'center',
baseline: 'middle',
position: 'inside',
formatter:ths.sub+'/'+ths.total,//自定义显示文字
},
}]
};
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?