水球图

水球图github

  上面是水球图的插件地址，水球图是echarts的一个插件，实现后效果如下，

  水球图是和echarts版本有搭配的，目前是3.0.6，但是这个需要echarts5版本，而目前我用的是echarts4.0.X版本，所以需要用水球图的2.X版本。

  所以安装的时候就需要指定版本， cnpm i [email protected]

  参数没啥可说的，更多参数官网和其他博客都有，

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,//自定义显示文字
        },

    }]
};