ECharts Liquid Fill Chart-5-背景、文字、边框设置

1、代码

// ECharts 水球图插件，需要额外插件脚本，参见上方“脚本”
// 完整配置参数参见：https://github.com/ecomfe/echarts-liquidfill
//两种方式的formatter
var option = {
    series: [{
            type: 'liquidFill',
            name: 'series name', //series name
            radius: '35%',
            center: ['50%', '20%'],
            backgroundStyle: {
                borderWidth: 5, //内边框宽度
                borderColor: 'yellow', //背景内边框
                color: 'white', //背景颜色
                shadowColor: 'red', //阴影
                shadowBlur: 10, //阴影模糊
            },
            outline: {
                borderDistance: 20, //边框距离
                itemStyle: {
                    borderWidth: 5,
                    borderColor: 'yellow',
                    shadowBlur: 10,
                    shadowColor: 'red'
                }
            },
            data: [{
                name: 'data name', //data name
                value: 0.6 //By default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data [0.6, 0.5, 0.4, 0.3], default text is 60%.
            }, 0.5, 0.4, 0.3],
            label: { //To change the text, you may use label.formatter, which can be set to a string or function.
                normal: {
                    formatter: '{a}\n{b}\nValue: {c}', //If it is a string, {a} series name, {b} data name,{c} data value.
                    textStyle: {
                        color: 'red', //波浪上文本颜色
                        insideColor: 'yellow', //波浪内部字体颜色
                        fontSize: 30
                    },
                    position: ['30%', '50%'], //Text position is at the center by default. label.position can be set to be 'inside', 'left', 'right', 'top', 'bottom', or horizontal and vertical positions like ['10%', '20%'], which means '10%' to the left (controlled by label.align, which can be 'left', 'center', or 'right') and '20%' to the top (controlled by label.baseline, which can be 'top', 'middle', or 'bottom').
                    // position:'top'
                    // align: 'center',
                    // baseline: 'center'

                }
            }
        },
        {
            type: 'liquidFill',
            name: 'series name', //series name
            radius: '35%',
            center: ['50%', '60%'],

            data: [{
                name: 'data name', //data name
                value: 0.6
            }, 0.5, 0.4, 0.3],
            label: {
			        	show:true,
			        	color: tempcolor[2],//和边框颜色同色
			        	fontSize: 16,
			            normal: {
			            	show:true,
			                position: ['50%', '50%'],//圈中文字的位置，If it is a string, {a} refers to series name, {b} to data name, and {c} to data value.
			                formatter: function(param) {
			                    return param.value + '/'+allCount+'\n\n'
			                        +param.seriesName+ '\n'
			                        + '（个）'
			                },
			               /* textStyle: {//整个wave，则把当前值提出
			                    fontSize: 16,
			                    color: tempcolor[2],
			                },*///这种方法不适用了
			                color: tempcolor[2],//默认背景下的文字颜色
			                insideColor: tempcolor[2], //水波背景下的文字颜色
			                fontSize: 16,
			            },
			        }
        }
    ]
};