水球图

水球图github

  上面是水球图的插件地址,水球图是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,//自定义显示文字
        },

    }]
};

 

posted @   伟衙内  阅读(110)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示