1. 程式人生 > >ECharts Liquid Fill Chart-5-背景、文字、邊框設定

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,
            },
        }
        }
    ]
};